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这些元素也需要随查询一起更改,以覆盖水平和垂直堆叠的项目.

更新了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>

根据重复问题的评论更新

如果一个人有很多项目,可以将它们分组,即每组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>