13

我需要一些帮助来定位 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 的宽度和高度是动态的。

我想要实现的是：

  1. 使右 div 的高度等于左 div 的高度。
  2. 使右侧 div 的宽度用 class 填充 div 的其余部分item。
  3. 带类的段落bottom应该在右 div 的底部。

这是一个代表我的目标的简单图像： 在此处输入图像描述

以及JSFiddle 演示的链接。

4

4 回答 4

10

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

选项

1.花车

正如@joeellis 演示的那样，灵活的宽度可以通过仅浮动左列并应用于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 之外的任何浏览器都不支持网格。尚未测试是否可以实现此布局，但浏览器支持可能会阻止它们成为目前的选项。

概括

  • 浮动不为任何浏览器提供解决方案。
  • HTML 表格和CSS 表格不提供跨浏览器解决方案。
  • Flexbox没有为IE9 或更早版本提供潜在的解决方案（并且可能会也可能不会为其他浏览器提供解决方案）。
  • 网格只为IE10提供了一个潜在的解决方案（并且可能会也可能不会提供解决方案）。

结论

目前似乎没有合适的 CSS 解决方案，可以在足够多的相关浏览器中工作，除了 flexbox（如果不需要支持 IE9 和更早版本）。

jQuery

这是几个使用 jQuery 强制列具有相同高度的修改演示。两个演示的 CSS 和 jQuery 是相同的。HTML 的区别仅在于左右列中有多少内容。两个演示都在所有浏览器中测试良好。相同的基本方法可以用于纯 JavaScript。

为简单起见，我将左右 div 的内部填充移至子元素 ( .content)。

于 2013-04-07T05:08:01.177 回答
9

相同高度的兄弟元素并保持在同一行可以通过将它们显示为table-cell和父元素来实现display: table。
工作小提琴： http: //jsfiddle.net/SgubR/2/（它还显示了用于创建列overflow: hidden的浮动元素技术。后者需要一个clearfix）

CSS 中的 table-cell 使用你想要的任何 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

兼容性：如果需要，IE6/7 的 IE8+
Fallback 与 inline-block 完全相同

以前的答案中更长的解释：这里和那里还有很好的旧方法仿列（你的设计必须考虑到这种技术）

于 2013-04-06T16:42:25.630 回答
2

只需在右列添加一个oveflow，不要浮动它。

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

这将right填充其余的宽度。

于 2013-04-06T16:26:52.237 回答
1

像这样的东西可能会起作用：

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

您要查找的内容的主要关键在于：

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

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

然而，他们的身高并不完全相关。在此示例中，您的左侧块的高度仍需要手动设置（因为它是一个浮动容器）

于 2013-04-06T16:31:36.503 回答