将不同引导列的子元素设置为相同的高度

时间：2018-06-17 18:14:51

标签： css html5 twitter-bootstrap

我需要设置这些元素的高度，以便不同列中具有相同颜色的边框处于相同的高度。 我不想使用javascript。 这些元素中有动态内容，因此我无法使用修复高度。 裁剪文字也是别无选择。 我听说过flexboxes和display：content但我不知道在这种情况下如何使用它。谁可以帮忙？



<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>css problem</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    .headline{
      border-bottom: solid 1px red;
    }
    .subline{
      border-bottom: solid 1px blue;
    }
    .text-block{
      border-bottom: solid 1px orange;
    }
  </style>
</head>

<body>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <header>
        <h1 class="headline">headdline 1</h1>
        <p class="subline">subline 1 - Lorem ipsum dolor sit amet</p>
      </header>
      <div class="text-block">
        <p>
          text-block 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
        </p>
      </div>
    </div>
    <div class="col-sm-4">
      <header>
        <h1 class="headline">headline 2 - Lorem ipsum </h1>
        <p class="subline">subline - 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec.</p>
      </header>
      <div class="text-block">
        <p>text-block 2- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec,
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
          fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
          vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
        </p>
      </div>
    </div>
    <div class="col-sm-4">
      <header>
        <h1 class="headline">headline 3 - Lorem ipsum </h1>
        <p class="subline">subline 3 -  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </header>
      <div class="text-block">
        <p>
          text-block 3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
          fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
          vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
          elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
          vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
          viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
          Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum
          rhoncus, sem quam semper libero
        </p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分：0)

请检查css。编写了一些CSS并将其与Bootstrap类一起使用。核实。

根据您的要求更改min-height: ***px; 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>css problem</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    .headline{
      border-bottom: solid 1px red;
    }
    .subline{
      border-bottom: solid 1px blue;
    }
    .text-block{
      border-bottom: solid 1px orange;
    }
    .col-container {
      display: flex;
      width: 100%;
      }
    .col {
        flex: 1;
        padding: 16px;
        border: 1px solid red;
    }
    .headline {
      min-height: 120px;
    }
    .subline{
      min-height: 170px;
      }
      .text-block{
        min-height: 670px;
      }
  </style>
</head>

<body>
<div class="container">
  <div class="row col-container">
    <div class="col-sm-4 col">
      <header>
        <h1 class="headline">headdline 1</h1>
        <p class="subline">subline 1 - Lorem ipsum dolor sit amet</p>
      </header>
      <div class="text-block">
        <p>
          text-block 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
        </p>
      </div>
    </div>
    <div class="col-sm-4 col">
      <header>
        <h1 class="headline">headline 2 - Lorem ipsum </h1>
        <p class="subline">subline - 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec.</p>
      </header>
      <div class="text-block">
        <p>text-block 2- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec,
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
          fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
          vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
        </p>
      </div>
    </div>
    <div class="col-sm-4 col">
      <header>
        <h1 class="headline">headline 3 - Lorem ipsum </h1>
        <p class="subline">subline 3 -  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </header>
      <div class="text-block">
        <p>
          text-block 3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
          fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
          vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
          elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
          vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
          viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
          Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum
          rhoncus, sem quam semper libero
        </p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

答案 1 :(得分：0)

使用CSS

可以获得使用Flexbox的相等高度和宽度 
.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

有关详细信息，请访问https://www.w3schools.com/howto/howto_css_equal_height.asp

相关问题
最新问题