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

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

css html twitter-bootstrap

Css 将不同引导列的子元素设置为相同高度,css,html,twitter-bootstrap,Css,Html,Twitter Bootstrap,我需要设置这些元素的高度，以便不同列中具有相同颜色的边框具有相同的高度。我不想使用javascript。这些元素中有动态内容，所以我不能使用“固定高度”。文本的裁剪也是没有选择的。我听说过FlexBox和display:content，但我不知道在这种情况下如何使用它。谁能帮忙 css问题 .标题{ 边框底部：实心1px红色； } .子系{ 边框底部：纯色1px蓝色； } .文本块{ 边框底部：实心1px橙色； } 头线1 子行1-Lorem ipsum dolor sit amet

我需要设置这些元素的高度，以便不同列中具有相同颜色的边框具有相同的高度。我不想使用javascript。这些元素中有动态内容，所以我不能使用“固定高度”。文本的裁剪也是没有选择的。我听说过FlexBox和display:content，但我不知道在这种情况下如何使用它。谁能帮忙


css问题
.标题{
边框底部：实心1px红色；
}
.子系{
边框底部：纯色1px蓝色；
}
.文本块{
边框底部：实心1px橙色；
}
头线1
子行1-Lorem ipsum dolor sit amet

文本块1-Lorem ipsum dolor sit amet，Concertetuer Adipising Elite。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。兼社会

标题2-Lorem ipsum
子行-2 Lorem ipsum dolor sit amet，连续三个月的发展精英。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。
在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis，
内克乌尔特里斯酒店
文本块2-Lorem ipsum dolor sit amet，Concertetuer Adipising Elite。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。
在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis，
ultricies nec，
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。
在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis，
ultricies nec、Pelletsque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo，
弗林尼拉·维尔、阿利奎特·内克、沃普特·埃吉特、阿库。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯
维泰，胡斯托。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。维瓦摩斯

标题3-Lorem ipsum
第3行-Lorem ipsum dolor sit amet，继续为精英们提供帮助。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨

文本块3-Lorem ipsum dolor sit amet，Concertetuer Adipsicing Elite。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。
在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis，
ultricies nec、Pelletsque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo，
弗林尼拉·维尔、阿利奎特·内克、沃普特·埃吉特、阿库。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯
维泰，胡斯托。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。维瓦摩斯
三色元素。埃尼安·沃普塔特·埃利芬德·泰勒斯。埃尼安·利奥·利古拉、波特提托·欧、康塞卡特
vitae，eleifend ac，enim。阿利奎姆·勒姆·安特、达比布斯·安特、维韦拉·奎斯、费吉亚·阿泰勒斯。Phasellus
viverra nulla ut metus varius laoreet。奎斯克·鲁特罗姆。埃涅亚饮食。奥古斯一世。
乌兰科乌尔里西斯库拉比图尔酒店。南乙对。艾蒂安·朗库斯。梅塞纳斯坦普斯，泰勒斯埃吉特调味品
朗卡斯，塞姆·夸姆·森佩尔·利伯罗

请检查css的名称。已经编写了一些css并将其用于引导类。检查一下

更改<代码>最小高度：**px根据您的要求


css问题
.标题{
边框底部：实心1px红色；
}
.子系{
边框底部：纯色1px蓝色；
}
.文本块{
边框底部：实心1px橙色；
}
.col容器{
显示器：flex；
宽度：100%；
}
上校{
弹性：1；
填充：16px；
边框：1px纯红；
}
.标题{
最小高度：120px；
}
.子系{
最小高度：170px；
}
.文本块{
最小高度：670px；
}
头线1
子行1-Lorem ipsum dolor sit amet

文本块1-Lorem ipsum dolor sit amet，Concertetuer Adipising Elite。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。兼社会

标题2-Lorem ipsum
子行-2 Lorem ipsum dolor sit amet，连续三个月的发展精英。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。
在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis，
内克乌尔特里斯酒店
文本块2-Lorem ipsum dolor sit amet，Concertetuer Adipising Elite。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。
在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis，
ultricies nec，
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。
在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis，
ultricies nec、Pelletsque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo，
弗林尼拉·维尔、阿利奎特·内克、沃普特·埃吉特、阿库。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯
维泰，胡斯托。猫咪的口头禅是一种很好的口头禅。整数tincidunt。克拉斯·达皮布斯。维瓦摩斯

标题3-Lorem ipsum
第3行-Lorem ipsum dolor sit amet，继续为精英们提供帮助。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨

文本块3-Lorem ipsum dolor sit amet，Concertetuer Adipsicing Elite。伊恩


<!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>

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}