CSS - 保持列中的div对齐

Question

我试着寻找我想要的东西，但我一直在为内部div找到css的东西。

无论如何，我要做的是让两列div与另一列对齐，右列始终与左列顶部对齐。这是我画空白的地方，我似乎无法弄清楚如何做到这一点。

左列的大小是动态的，所以我不能使用：height属性来保持秩序。

以下是我要做的事情：

Answer 1

You can do this by three ways

First You can use table like this
<table>
<tr>
    <td><div>div</div></td>
    <td><div>div</div></td>
</tr>
<tr>
   <td><div>div</div></td>
   <td><div>div</div></td>
</tr>
</table>
Another Way By using the container div like below
<div class="outer-container">
   <div class="box-container">
      <div class="left-box">
      Left Box content
       </div>
      <div class="right-box">
      Right Box Content
      </div>
   </div>
</div>
Third Way is by using JS
Calcuate the height by Js of left-box and  and  then pass that to right-box to maintain the gap.

Answer 2

这样做非常美妙：

.div1, .div2{
vertical-align:top;
}
.div1{
float:left;
width:70px;
}
.div2{
display: table-cell;
width:200px;
}
.div3{
display:table-cell;
width:200px;
}


<div class='div1'>1</div>
<div class='div2'>ABCDE FGHIJ KLMNO PQRST UVWXY Z</div>
<div class='div1'>2</div><div class='div2'>ABCDE FGHIJ KLMNO PQRST UVWXY Z</div>

等

Answer 3

我想创建一个网格，但是简单的表和嵌套的div迫使我一次布局行。这使得为​​响应式设计堆叠列很困难。

这是一个使用flexbox创建网格的代码笔。第一个允许您一次指定行，而第二个允许您一次指定列。

https://codepen.io/chaimleib/pen/zPPGgj

HTML：

flex

LESS：

<h2>By row</h2>
<div class="table table3cols">
  <div class="table-cell"><h3>Eddard Stark</h3></div>
  <div class="table-cell">Sword named Ice</div>
  <div class="table-cell">No direwolf</div>

  <div class="table-cell"><h3>Jon Snow</h3></div>
  <div class="table-cell">Sword named Longclaw</div>
  <div class="table-cell">Direwolf: Ghost</div>

  <div class="table-cell"><h3>Arya Stark</h3></div>
  <div class="table-cell">Sword named Needle</div>
  <div class="table-cell">Direwolf: Nymeria</div>
</div>

<h2>By column</h2>

<div class="table table3cols">
  <div style="order:1;" class="table-cell"><h3>Eddard Stark</h3></div>
  <div style="order:2;" class="table-cell">Sword named Ice</div>
  <div style="order:3;" class="table-cell">No direwolf</div>

  <div style="order:1;" class="table-cell"><h3>Jon Snow</h3></div>
  <div style="order:2;" class="table-cell">Sword named Longclaw</div>
  <div style="order:3;" class="table-cell">Direwolf: Ghost</div>

  <div style="order:1;" class="table-cell"><h3>Arya Stark</h3></div>
  <div style="order:2;" class="table-cell">Sword named Needle</div>
  <div style="order:3;" class="table-cell">Direwolf: Nymeria</div>
</div>

该技术归功于Davide Rizzo，他的article也展示了让设计响应的精彩方法。