Question

我需要一些定位div的帮助。 HTML结构如下：

<div class="container">
    <div class="item">
        <div class="left">
            lorem lorem
        </div>
        <div class="right">
            <p>right</p>
            <p class="bottom">bottom</p>
        </div>
    </div>
</div>

我有以下CSS：

.container {
    float: left;
    padding: 15px;
    width: 600px;
}
.item {
    float: left;
    padding: 15px;
    width: 570px;
}
.left {
    float: left;
    padding: 40px 20px;
    margin-right: 10px;
}
.right {
    position: relative;
    float: left;
}
.bottom {
    position: absolute;
    bottom: 0;
}

左边div的宽度和高度是动态的。

我想要实现的目标是：

使右div的高度等于左div的高度。
使用类item使右侧div的宽度填充div的其余部分。
类bottom的段落应位于右侧div的底部。

这是一个代表我目标的简单图像： enter image description here

指向JSFiddle demo的链接。

Answer 1

获得.bottom的正确位置和宽度似乎是跨浏览器CSS解决方案的最大障碍。

选项

<强> 1。浮

正如@joeell所示，灵活的宽度可以通过仅浮动左列并将overflow:hidden应用于右列来实现。

.bottom的位置无法在任何浏览器中实现。对于具有相同，可变高度的浮动柱，没有CSS解决方案。绝对定位的.bottom元素必须位于右列div内，因此100％宽度将使其具有正确的大小。但由于右列不一定与左列一样高，因此将.bottom与bottom:0定位不一定会将其放在容器的底部。

<强> 2。 HTML表格和CSS表格

灵活的宽度可以通过给左单元格宽度为1px而不指定右单元格的宽度来实现。两个细胞都会长大以适应内容。任何额外的空间都将被添加到正确的单元格中。

如果.bottom位于右表格单元格内，则无法在Firefox中实现该位置。相对位置对Firefox中的表格单元格没有影响;绝对位置和100％宽度不会相对于右表格单元格。

如果.bottom被视为右列中的单独表格单元格，则除Firefox之外的任何浏览器都无法实现右表格单元格和底部表格单元格的正确高度。表格单元格的高度不同于它们的宽度（Firefox除外）。

第3。 CSS3 flexbox和CSS3网格

Flexbox和网格是不久的将来有前途的布局工具。但是IE9或更早版本不支持flexbox，IE10以外的任何浏览器都不支持网格。尚未测试是否可以实现此布局，但浏览器支持可能会阻止它们成为当前的选项。

摘要

Floats不为任何浏览器提供解决方案。
HTML表格和CSS tables不提供跨浏览器解决方案。
Flexbox未提供IE9 or earlier的潜在解决方案（可能会也可能不会为其他浏览器提供解决方案）。
Grids仅提供IE10的潜在解决方案（可能会或可能不会在那里提供解决方案）。

结论

目前似乎没有足够的CSS解决方案，可以在足够的相关浏览器中使用，可能的例外情况是flexbox（如果不需要支持IE9及更早版本）。

的jQuery

这是一些使用jQuery强制列具有相同高度的修改演示。两个演示的CSS和jQuery是相同的。 HTML仅根据左右列中的内容有所不同。这两个演示在所有浏览器中都经过良好测相同的基本方法可用于纯JavaScript。

为了简单起见，我将左右div的内部填充移动到子元素（.content）。

Answer 2

同样高度的同级元素可以通过将其显示为table-cell ，将父级显示为display: table来实现。工作小提琴：http://jsfiddle.net/SgubR/2/（它还显示 overflow: hidden沿浮动元素技术创建列。后者需要一个clearfix）

CSS中的表格单元格使用您想要的任何HTML元素（section，div，span，li等），其语义与用于表格布局的table，tr和td元素无关（除了可视结果相同），这就是我们想要的。）

display: table设置在父
display: table-row可用于中间的元素，但如果没有它，则可以使用
display: table-cell
宽度设置为无，部分或全部这些“单元格”。浏览器将适应内容和宽度设置，以便计算它们的宽度（显然是父级的总宽度）
table-layout: fixed会告诉浏览器切换到其他表格布局算法，他们不关心内容的数量，只关心CSS设置的宽度
vertical-align: top（但您可以设置其他值，非常适合复杂的布局）
边距不适用于“单元格”，仅适用于填充。边距仅适用于桌子本身。虽然您仍然可以将“单元格”与border-collapse: separate和/或border-spacing: 4px 6px

兼容性：IE8 +
如果需要，IE6 / 7的后退与内联块

完全相同

以前答案中的较长解释： here 和 there 以及 faux-columns 的旧方法>（你的设计必须考虑到这种技术）

Answer 3

只需将oveflow添加到右栏，不要将其浮动。

.right {
  position: relative;
  overflow: hidden;
}

这将使right填充宽度的其余部分。

Answer 4

这样的事可能有用：

http://jsfiddle.net/PCvy9/2/

您正在寻找的主要关键字：

 .right {
   overflow: hidden;
   background-color: #C82927;
 }

这是由于称为“块格式化上下文”。关于为什么在这里有很好的推理和教程：http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

然而，他们的高度并没有完全联系在一起;在这个例子中，您的左侧区块的高度仍然需要手动设置（因为它是一个浮动的容器）

使div填充父级的剩余空间

4 个答案:

选项

摘要

结论

的jQuery