• 0
Akkord87

Врестка квадрата и заголовка

Вопрос

Здравствуйте!

Помоги пожалуйста решить проблему с небольшим куском верстки :)

Пример на картинке.

Я не могу понять, как свертать так, чтобы правая часть границы квадрата не перекрывала заголовок. При этом если заголовок из 1,2,3 строк то квадрат так же подстраивается и растягивается по высоте.

Есть у кого идеи, как можно это реализовать?

verstka.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 1

Как вариант:

<div class="wrap">
  Наука
  <div class="square">
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt obcaecati rem quasi saepe tenetur illo exercitationem dicta explicabo laudantium cumque, expedita voluptate repudiandae perspiciatis culpa suscipit? Necessitatibus nisi qui quaerat!
    </div>  
  </div>
</div>
.square{
  position: relative;
  border-left: 1px solid #000;
}
.square:before, .square:after{
    content: '';
  position: absolute;
  width: 100px;
  height: 1px;
  background: #000;
  left: 0;
}
.square:before{
  top: 0;
}
.square:after{
  bottom: 0;
}
.text{
  position: relative;
  padding: 30px 0 30px 20px;
}
.text:before, .text:after{
  content: '';
  position: absolute;
  height: 20px;
  width: 1px;
  background: #000;
  left: 100px;
}
.text:before{
  top: 0;
}
.text:after{
  bottom: 0px;
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Спасибо большое за идею, немного доработал и получилось так, как и задумывалось)))))

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы