CSS-如何让不同父母的孩子有相同的身高？

Question

我有一排2列。在这些列中，我有一个标题，内容和列表。它们具有不同的内容长度。

我要实现的是，该列表在同一行上彼此相邻，而不会破坏引导程序移动优化。

我首先尝试了3个不同的行，但是当列断开时，内容不再属于彼此。没有JavaScript，有没有我需要的解决方案？也许以某种方式使用flexbox？

这是我当前的代码：

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

Answer 1

为了能够实现这一目标，而无需使用脚本，所有项目（h2，p，p，ul）需要 看 对方，这在技术上意味着他们需要的兄弟姐妹。

然后，对于宽屏并排放置的屏幕，需要对其进行重新排序，以h2第一个（order: 0）开头，依此类推。

我使用了一个媒体查询，但是您可能想添加更多内容，以匹配Boostrap的更多断点。

要添加外边界，您需要 在元素上使用border-top/ border-left/ border-right/ 的组合（border- bottom还需要随查询的改变），以覆盖水平和垂直堆叠的项目。

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

如果一个项目有很多，则可以将它们分组，即每组4个，以使CSS小得多。

Codepen样本

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