CSS - 保持列中的 div 对齐

Question

我尝试搜索我正在寻找的东西，但我一直在内部 div 上寻找 css 的东西。

无论如何，我想做的是让两列 div 彼此对齐，右列始终与左列的顶部对齐。这是我在画一个空白的地方，我似乎不知道该怎么做。

左列的大小是动态的，所以我不能使用 :height 属性来保持井井有条。

这是我想要做的：

Answer 1

您可以做的是，将内联 div 包装在透明 div 中。例如：

<div class="transparent-container">
    <div class="inline-div">
    </div>
    <div class="inline-div">
    </div>
    <div class="clearfix"></div>
</div>

Here is a working JSFiddle

Answer 2

您可以通过三种方式做到这一点：

1. 使用表格：

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

1. 使用容器 div 如下：

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

1. 使用 JS：

通过Js计算left-box的高度，然后将其传递给right-box以保持间隙。

Answer 3

这会非常漂亮：

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

解决方案1：你可以使用表格

解决方案2：使用jQuery，获取每个div的每一列并获取它们的高度。然后比较高度并将两个 div 设置为最大高度。但我更喜欢使用表格来解决这个问题。

Answer 5

你可以如下图所示：

表示在您包裹在 div 中的每一行中，并且该 div 有 2 个列 div。 clearfloat 之后

Answer 6

我在类似情况下所做的是 - 而不是创建两个 列 - 为 2 个 div 的每个 row 构建一个容器，并在该容器中浮动 div，而不浮动容器本身。这样容器的高度就会扩展到最高 div 的高度。并且下一个容器将在其下方对齐。

你可以看看结果和我的 HTML here。

Answer 7

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

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

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

HTML：

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

少：

/* Variables
================================== */
@bw: 3px;  // border width

/* Tables
================================== */
.table {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 3em 0;
  padding: 0;
}
.table-cell {
  box-sizing: border-box;
  flex-grow: 1;
  width: 100%;  // Default to full width
  padding: 0.8em 1.2em;
  overflow: hidden; // Or flex might break
  list-style: none;
  border: solid @bw white; // margins would overflow row and cause early wrapping
  background: fade(slategrey,20%);
  > h1, > h2, > h3, > h4, > h5, > h6 { margin: 0; }
}

/* Table column sizing
================================== */
.table2cols > .table-cell  { width: 50%; }
.table3cols > .table-cell  { width: 33.33%; }
.table4cols > .table-cell  { width: 25%; }

/* Page styling
================================== */

body {
  border: 1px solid grey;
  margin: 0 auto;
  max-width: 800px;
  padding: 2em;
}
h1, h2, h3, h4, h5, h6 { margin-top: 0; }

这项技术的功劳归功于 Davide Rizzo，他的article 还展示了使设计具有响应性的巧妙方法。