CSS - 如何让不同父母的孩子身高相同? [英] CSS - How to have children in different parents the same height?

查看:22
本文介绍了CSS - 如何让不同父母的孩子身高相同?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一行有 2 列.在这些列中,我有一个标题、内容和一个列表.它们具有不同的内容长度.

我想要实现的是,列表在同一行上彼此相邻,而不会破坏引导移动优化.

我第一次尝试使用 3 个不同的行,但是当列断开时,内容不再属于彼此.有没有没有 JavaScript 的解决方案?也许以某种方式使用 flexbox?

这是我当前的代码:

<div class="容器"><div class="row"><div class="light-section col-xs-12 col-md-6"><div class="panel panel-default panel-blank"><div class="panel-body"><div class="内容">//每列的内容长度不同<h2>Lorem ipsum Lorem ipsum<p>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren</p><p>Lorem ipsum dolor</p><ul class="check">//我希望这个列表与另一列中的另一个 ul.check 保持在同一行<li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor sat amet,</li>

<div class="dark-section col-xs-12 col-md-6"><div class="panel panel-default panel-blank"><div class="panel-body"><h2>逻辑推理<p>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren,无海 takimata sanctus est Lorem ipsum dolor 坐 amet.Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p><ul class="check"><li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor 坐 amet,<li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor sat amet,</li>

解决方案

为了能够在不使用脚本的情况下完成,所有项目 (h2,p,p,ul) 需要看到对方,这在技术上意味着他们需要成为兄弟姐妹.

然后,对于并排放置的更宽的屏幕,它们需要重新排序,其中 h2 首先出现(order: 0)等等

我使用了一个媒体查询,但您可能想要添加更多,以匹配更多 Boostrap 的断点.

要添加ie外边框,需要使用border-top/border-left/border-right/border-bottom 在元素上,也需要随查询更改,以覆盖水平和垂直堆叠的项目.

更新代码笔

@media (min-width: 768px) {.内容 {显示:弹性;flex-wrap: 包裹;justify-content:空间环绕;}.内容>* {flex-basis: calc(50% - 30px);}.content h2 {/* 第一行 */订单:0;}.content p {/* 第二行 */订单:1;}.content p + p {/* 第三行 */订单:2;flex-basis: calc(100% - 30px);/* 作为标记中只有 1 个 `p`,它需要 100% 的宽度,或在标记中添加一个额外的空 */}.content ul {/* 第 4 行 */订单:3;}}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="样式表"/><div class="浅灰色截面标尺"><div class="容器"><div class="row"><div class="light-section col-xs-12"><div class="内容"><h2>Lorem ipsum Lorem ipsum</h2><p>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren</p><p>Lorem ipsum dolor</p><ul class="check"><li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor sat amet,</li><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren, no sea takimatasanctus est Lorem ipsum dolor 坐 amet.Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p><ul class="check"><li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor sat amet,</li><li>Lorem ipsum dolor sat amet,</li>

<小时>

更新,基于 重复问题

如果有很多项目,可以将它们分组,即每组 4 个,以使 CSS 更小.

Codepen 示例

.container {显示:弹性;弹性方向:列;justify-content:空间环绕;}.container .row {显示:弹性;flex-wrap: 包裹;justify-content:空间环绕;}.container .row>* {flex-basis: calc(100% - 30px);最小宽度:0;}.container .row>div {边框:2px纯灰色;}.container .row>div:nth-child(8n+1),.container .row>div:nth-child(8n+2),.container .row>div:nth-child(8n+3),.container .row>div:nth-child(8n+4) {背景:浅灰色;}.container .row>div:nth-child(4n+1) {边框宽度:2px 2px 0 2px;边距顶部:10px;}.container .row>div:nth-child(4n+2) {边框宽度:0 2px;}.container .row>div:nth-child(4n+2)+div {边框宽度:0 2px;}.container .row>div:nth-child(4n+4) {边框宽度:0 2px 2px 2px;}@media(最小宽度:600px){.container .row>* {flex-basis: calc(50% - 30px);}.container .row>div:nth-child(4n+1) {订单:0;}.container .row>div:nth-child(4n+2) {订单:1;}.container .row>div:nth-child(4n+2)+div {订单:2;}.container .row>div:nth-child(4n+4) {订单:3;}.container .row>div:nth-child(4n+9) {订单:4;}.container .row>div:nth-child(4n+10) {订单:5;}.container .row>div:nth-child(4n+10)+div {订单:6;}.container .row>div:nth-child(4n+12) {订单:7;}}

<div class="row"><div><h2>标题 1</h2></div><div><p>测试文本1</p></div><div><p>测试文本2</p></div><div><button>按钮</button></div><div><h2>标题 2</h2></div><div><p>测试文本 1 有点长以强制它换行</p></div><div><p>测试文本2</p></div><div><button>按钮</button></div><div><h2>标题 3 有点长以使其环绕</h2></div><div><p>测试文本 1 有点长以强制它换行</p></div><div><p>测试文本2</p></div><div><button>按钮</button></div><div><h2>标题 4</h2></div><div><p>测试文本1</p></div><div><p>测试文本 2 有点长以强制它换行</p></div><div><button>按钮</button></div>

<div class="row"><div><h2>标题 5</h2></div><div><p>测试文本1</p></div><div><p>测试文本2</p></div><div><button>按钮</button></div><div><h2>标题 6</h2></div><div><p>测试文本 1 有点长以强制它换行</p></div><div><p>测试文本2</p></div><div><button>按钮</button></div><div><h2>标题 7 有点长以使其环绕</h2></div><div><p>测试文本 1 有点长以强制它换行</p></div><div><p>测试文本2</p></div><div><button>按钮</button></div><div><h2>标题 8</h2></div><div><p>测试文本1</p></div><div><p>测试文本 2 有点长以强制它换行</p></div><div><button>按钮</button></div>

I have a row with 2 columns. Within these columns I have a headline, content and a list. They have a different content length.

What I want to achieve is, that the list stays next to each other on the same line without breaking the bootstrap mobile optimization.

I first tried it with 3 different rows, but when the columns break, the content doesn't belong to each other anymore. Is there a solution for what I need without JavaScript? Maybe with flexbox somehow?

Here is my current code:

<div class="light-grey-section ruler">
   <div class="container">
      <div class="row">
         <div class="light-section col-xs-12 col-md-6">
            <div class="panel panel-default panel-blank">
               <div class="panel-body">
                  <div class="content"> // contentlength is different in each column
                     <h2>
                        Lorem ipsum Lorem ipsum
                     </h2>
                     <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
                     </p>
                     <p>
                        Lorem ipsum dolor
                     </p>
                     <ul class="check"> // I want this list to stay in the same line with the other ul.check in the other column
                        <li>Lorem ipsum dolor sit amet,</li>
                        <li>Lorem ipsum dolor sit amet,</li>
                        <li>Lorem ipsum dolor sit amet,</li>
                        <li>Lorem ipsum dolor sit amet,</li>
                        <li>Lorem ipsum dolor sit amet,</li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
         <div class="dark-section col-xs-12 col-md-6">
            <div class="panel panel-default panel-blank">
               <div class="panel-body">
                  <h2>
                     Lorem ipsum
                  </h2>
                  <p>
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                  </p>
                  <ul class="check">
                     <li>Lorem ipsum dolor sit amet,</li>
                     <li>
                        Lorem ipsum dolor sit amet,
                     </li>
                     <li>Lorem ipsum dolor sit amet,</li>
                     <li>Lorem ipsum dolor sit amet,</li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

解决方案

To be able to accomplish that without using script, all the items (h2,p,p,ul) needs to see each other, which technically mean they need to be siblings.

And then, for wider screens where they sit side-by-side, they need to be reordered, where the h2 comes first (order: 0) and so on.

I used one media query, but you might want to add more, to match more of Boostrap's break points.

To add i.e. an outer border, you need to use a combination of border-top/border-left/border-right/border-bottom on the elements, which also need to be altered with the query's, to cover both horizontally and vertically stacked items.

Updated codepen

@media (min-width: 768px) {
  
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .content > * {
    flex-basis: calc(50% - 30px);
  }

  .content h2 {                     /*  1st row  */
    order: 0;
  }
  .content p {                      /*  2nd row  */
    order: 1;
  }
  .content p + p {                  /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);  /* as only 1 `p` in markup, it need 100% width,
                                       or add an extra empty in the markup  */
  }
  .content ul {                     /*  4th row  */
    order: 3;
  }
  
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="light-grey-section ruler">
  <div class="container">
    <div class="row">
      <div class="light-section col-xs-12">
        
        <div class="content">
          <h2>Lorem ipsum Lorem ipsum</h2>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
          </p>
          <p>
            Lorem ipsum dolor
          </p>
          <ul class="check">
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
          </ul>
          <h2>Lorem ipsum</h2>
          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
          </p>
          <ul class="check">
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
            <li>Lorem ipsum dolor sit amet,</li>
          </ul>
        </div>
        
      </div>
    </div>
  </div>
</div>


Updated, based on a comment at a duplicate question

If one have many items, one can group them, i.e. 4 per group, to make the CSS much smaller.

Codepen sample

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.container .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.container .row>* {
  flex-basis: calc(100% - 30px);
  min-width: 0;
}

.container .row>div {
  border: 2px solid gray;
}

.container .row>div:nth-child(8n+1),
.container .row>div:nth-child(8n+2),
.container .row>div:nth-child(8n+3),
.container .row>div:nth-child(8n+4) {
  background: lightgray;
}

.container .row>div:nth-child(4n+1) {
  border-width: 2px 2px 0 2px;
  margin-top: 10px;
}

.container .row>div:nth-child(4n+2) {
  border-width: 0 2px;
}

.container .row>div:nth-child(4n+2)+div {
  border-width: 0 2px;
}

.container .row>div:nth-child(4n+4) {
  border-width: 0 2px 2px 2px;
}

@media (min-width: 600px) {
  .container .row>* {
    flex-basis: calc(50% - 30px);
  }
  .container .row>div:nth-child(4n+1) {
    order: 0;
  }
  .container .row>div:nth-child(4n+2) {
    order: 1;
  }
  .container .row>div:nth-child(4n+2)+div {
    order: 2;
  }
  .container .row>div:nth-child(4n+4) {
    order: 3;
  }
  .container .row>div:nth-child(4n+9) {
    order: 4;
  }
  .container .row>div:nth-child(4n+10) {
    order: 5;
  }
  .container .row>div:nth-child(4n+10)+div {
    order: 6;
  }
  .container .row>div:nth-child(4n+12) {
    order: 7;
  }
}

<div class="container">
  <div class="row">  
      <div><h2>Title 1</h2></div>
      <div><p>Test text 1</p></div>
      <div><p>Test text 2</p></div>
      <div><button>Button</button></div>

      <div><h2>Title 2</h2></div>
      <div><p>Test text 1 is a bit longer to force it to wrap</p></div>
      <div><p>Test text 2</p></div>
      <div><button>Button</button></div>

      <div><h2>Title 3 is a bit longer to make it wrap</h2></div>
      <div><p>Test text 1 is a bit longer to force it to wrap</p></div>
      <div><p>Test text 2</p></div>
      <div><button>Button</button></div>
        
      <div><h2>Title 4</h2></div>
      <div><p>Test text 1</p></div>
      <div><p>Test text 2 is a bit longer to force it to wrap</p></div>
      <div><button>Button</button></div>
  </div>
  
  <div class="row">  
      <div><h2>Title 5</h2></div>
      <div><p>Test text 1</p></div>
      <div><p>Test text 2</p></div>
      <div><button>Button</button></div>

      <div><h2>Title 6</h2></div>
      <div><p>Test text 1 is a bit longer to force it to wrap</p></div>
      <div><p>Test text 2</p></div>
      <div><button>Button</button></div>

      <div><h2>Title 7 is a bit longer to make it wrap</h2></div>
      <div><p>Test text 1 is a bit longer to force it to wrap</p></div>
      <div><p>Test text 2</p></div>
      <div><button>Button</button></div>
        
      <div><h2>Title 8</h2></div>
      <div><p>Test text 1</p></div>
      <div><p>Test text 2 is a bit longer to force it to wrap</p></div>
      <div><button>Button</button></div>
  </div>  
</div>

这篇关于CSS - 如何让不同父母的孩子身高相同?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆