Question

我想将图像容器放在文本框旁边，图像总是与文本的高度相匹配：

<-         50%        ->  <-         50%        ->         
+----------------------+  +----------------------+
| Lorem ipsum dolor si |  | some                 |
| t amet, consectetuer |  | image                |
| adipiscingelit. Aene |  |                      |
| an commodoligula ege |  |                      |
| t dolor.             |  |                      |
+----------------------+  +----------------------+

VS

+------------+  +------------+
| Lorem ipsu |  | some       |
| m dolor si |  | image      |
| t amet, co |  |            |
| nsectetuer |  |            |    Reduce
| adipiscing |  |            |<-- browser
| elit. Aene |  |            |    width
| an commodo |  |            |
| ligula ege |  |            |
| t dolor.   |  |            |
+------------+  +------------+

为实现这一点，我将两个容器包装在div中，并将图像显示为背景图像：

<div class="outerTable">
    <div>Lorem ipsum dolor sit amet, consectetuer</div>
    <div class="image">
        <div></div>
    </div>
</div>

具有以下样式：

.outerTable {
    width: 100%;
    display: table;
}
.outerTable > div {
    display: table-cell;
    border: 10px solid transparent;
    background-clip: padding-box;
    position: relative;
    background-color: #fff;
    padding: 2%;
    width: 50%;
}
.image {
    background-color: #fff;
}
.image > div {
    background-image: url(http://lorempixel.com/500/300/abstract/4);
    background-size: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6%;
    background-clip: content-box;
    background-position: 0 0;
}

可在此处找到一个工作示例：http://jsfiddle.net/KxFUL/

这适用于Chrome，Safari和Opera。但是在FireFox中，图像覆盖了整个页面，而在IE11中，图像根本没有显示......

我错过了什么 - 完全错误的概念？有任何想法吗？任何不同的解决方案？

Answer 1

如果您愿意，可以采取以下措施。删除您要设置背景图像的位置。我试着把它绑在有边框的图像上。但你可以使用css投影设置插图。

http://jsfiddle.net/cornelas/KxFUL/4/

.outerTable > div {
  display: table-cell;
  border: 10px solid transparent;
  background-clip: padding-box;
  position: relative;
  background-size: cover;
  background-color: #fff;
  padding: 2%;
  width: 50%;
}
.image {
  background-color: #fff;
  background-image: url(http://lorempixel.com/500/300/abstract/4);
}

以下是添加边框的代码

.image {
   background-color: #fff;
   background-image: url(http://lorempixel.com/500/300/abstract/4);
   -webkit-box-shadow:0 0 0 13px #FFFFFF inset;
   box-shadow:inset 0px 0px 0px 13px #ffffff;
 }

更新小提琴 http://jsfiddle.net/cornelas/KxFUL/6/

Answer 2

我的解决方案是一个稍微冗长的解决方案，但它只是改变了CSS，以实现我想要的目标。

所以首先我尝试使用填充而不是透明边框，我设置的第一个填充位于.outer-table本身。当然，该表格宽度为100％，因此您需要按照Paul Irish的建议添加大小调整大小：

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

然后，我在.col-66上设置了一个填充，以创建均匀间距（display: table-cell上不能使用边距）。

最后我将你的背景图像设置在.image上，而不是放在那里的空容器上，这意味着不需要绝对定位。

新CSS：

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body {
    background-image: url(http://bradjasper.com/subtle-patterns-bookmarklet/patterns/concrete_wall.png);
    background-repeat: repeat repeat;
}
.outerTable {
    width: 100%;
    display: table;
    padding: 10px;
}
.outerTable > div {
    display: table-cell;
}
.col-33 {
    width: 33.333%
}
.col-66 {
    width: 66.666%;
    padding-right: 20px;
}
.content {
    padding: 3.4%;
    background-clip: padding-box;
    margin-bottom: 20px;
    background-color: #fff;
}
.content:last-child {
    margin-bottom: 0;
}
.image {
    background-image: url(http://lorempixel.com/500/300/abstract/4);
    background-size: cover;
    border: 10px white solid;
    background-position: 0 0;
}

And a fiddle to finish it off.

Answer 3

表格单元格并不真正意味着position: relative;设置它们（我相信如果你试图在实际的表格单元<td>上设置它，它就不会起作用，虽然我错了）。

因为您使用的是CSS表格，所以大多数现代浏览器都允许您在其上设置它，但Firefox似乎坚持表格单元格不允许它的想法。

你可以通过几种方式解决这个问题，但这将取决于你还有什么进展。

例如，您可以在table-cell元素内部的内容周围附加<div>，然后将其设置为position: relative;。这样做的缺点是你需要给它一个设定的高度，如果你需要高度与内容一起流动，它将不会起作用。

您也可以使用javascript / jQuery。

这篇文章有一个很好的解决方案，所以我不打算详细解释这个过程，因为他做得更好：

http://css-tricks.com/absolutely-position-element-within-a-table-cell/

请注意，他在实际的表元素上使用它，因此您需要进行一些更改。从本质上讲，它与上面列出的额外div相同，只是用JS动态设置高度。您可以调整它以更改窗口大小调整的高度以使其响应等...

最后，（就我的建议而言，我确定此处未列出更多选项） - 以及我的首选建议，您可以使用display: inline-block;来构建您的双列布局，而不是display: table-cell;。这种方式可以避免整个陷阱，并且还会减少获得效果所需的html元素数量。

这里有一个很好的解读：

http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Answer 4

问题是你为.image div设置了display：table-cell，然后在其中放入一个绝对定位的元素，table-cell不能包含绝对元素，因为它中的元素需要坐标来定位NOT它的父级（虽然它的父级是相对的），但来自表（或显示：表）

Answer 5

你“不能”在表格单元格中进行绝对定位，与表格单元格相关（不要问我为什么，我没有发明这个愚蠢的CSS规范）。在任何情况下，.image都应该有位置：相对于position：absolute to work。

我认为Chrome很好，忽略了标准，或类似的东西。

firefox和IE11中的流畅CSS布局中断

5 个答案: