1

С помощью bootstrap сделал такую верстку

<div class="card">
  <div class="row">
  <div class="col-md-1 col-sm-1 col-1 col-lg-1">
    <div class="orange-line">.</div>
  </div>
  <div class="col-md-11 col-sm-11 col-11 col-lg-11">
    <div class="row">
      <div class="col-md-10 col-sm-10">Large content</div>
      <div class="col-md-2 col-sm-2">Small content</div>
    </div>
  </div>
  </div>
</div>

Стиль оранжевой линии

.orange-line {
  border-left: 10px solid #ff8800;
  color: #ffffff;
}

То, что получилось, можно посмотреть вот тут

Вопрос в том, как сделать так, чтобы оранжевая линия всегда была той же высоты, что и блок card (занимала всю его высоту). Сейчас при разной ширине экрана она одной и той же высоты.

1 ответ 1

0

.orange-line {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-left: 10px solid #ff8800;
  color: #ffffff;
}

.card {
  position: relative;
}
<!DOCTYPE html>
<html>

<head>
  <link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="[email protected]" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="card">
    <div class="orange-line">.</div>
    <div class="row">
      <div class="col-md-1 col-sm-1 col-1 col-lg-1">

      </div>
      <div class="col-md-11 col-sm-11 col-11 col-lg-11">
        <div class="row">
          <div class="col-md-10 col-sm-10">Large content</div>
          <div class="col-md-2 col-sm-2">Small content</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.