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

为了能够在不使用脚本的情况下完成该操作，所有项目（using System.Linq; class Program { static void Main (string[] args) { var s = "1204852384 / 1245983245"; var p = s.Split(" ".ToCharArray()) .Select(num => { if (long.TryParse(num, out var number)) return (long?)number; return null; }) .Where( num => num.HasValue) .Select(num => num.Value) .ToList(); long first = long.MinValue; long last = long.MinValue; if (p.Count >= 2) last = p.Last (); if (p.Count > 0) first = p.First (); Console.WriteLine (first); Console.WriteLine (last); Console.ReadLine (); } } ，h2，p，p）都需要查看彼此，技术上意味着他们需要成为兄弟姐妹。

然后，对于并排放置的更宽屏幕，需要重新排序，ul首先出现（h2）等等。

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

要添加ie外边框，您需要在元素上使用order: 0 / border-top / border-left / border-right的组合，这也需要要使用查询进行更改，以覆盖水平和垂直堆叠的项目。

Updated codepen

＆＃13;

＆＃13;

border-bottom

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

根据a duplicate question

上的评论进行了更新

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

Codepen sample

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;