5

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

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

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

这是我正在尝试做的事情：

在此处输入图像描述

4

7 回答 7

5

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

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

这是一个有效的 JSFiddle

于 2013-01-07T07:12:17.300 回答
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计算高度，然后将其传递给右框以保持间隙。

于 2013-01-09T13:01:42.810 回答
1

这将非常漂亮地完成这个技巧：

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

等等

于 2014-11-27T19:59:16.530 回答
0

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

您可以在这里查看结果和我的 HTML 。

于 2013-01-07T07:19:17.067 回答
0

解决方案1：您可以使用表

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

于 2013-01-07T07:07:00.107 回答
0

你可以让它如下所示：

在此处输入图像描述

意味着在您包装在 div 中的每一行中，并且该 div 有 2 个列 div。clearfloat 之后

于 2013-01-07T07:12:24.710 回答
0

我想创建一个网格，但简单的表格和嵌套的 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，他的文章还展示了使设计响应式的巧妙方法。

于 2017-11-16T22:02:52.547 回答