Question

我试图避免在这个jsFiddle中使用布局表，我需要提出更多的语义和通用标记以及CSS。

左栏中有图像，右栏有说明。

然而，挑战很少：我们不知道任何像素尺寸，描述可能会很长，这就是为什么我们不能简单地将两个div并排浮动。

图像也需要垂直对齐，但我们不知道容器高度或图像大小。

显示：表格不是一个选项。 Javascript不是一个选项

<table>
 <tr>
    <td class="image">
        <img src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png">
    </td>

    <td class="description">
        <p>Left section only needs to be as wide as image is, and we don't know pixel size of the image. It has to be vertically centered.</p>

        <p>Right section should take all available space left</p>

        <p>We do not know how much text will be in the right section.</p>            
        <p>We can not use display: table since solutions needs to work in IE7 as well</p>                        
    </td>
  </tr>
<table>

请抛出任何想法：）

Answer 1

这是你的解决方案：

http://jsfiddle.net/ZXfFG/3/

说明：

所以你有两个问题：1）调整2列的宽度和高度。 2）垂直放置图像。

解决方案：

1）左栏的宽度会自动调整，因为它会调整到孩子的（图像）宽度。将其float属性设置为left会将文本粘贴在它旁边。当文本比图像短时，这很好，但如果它像你提到的那样更长呢？然后你会得到这样的东西：

enter image description here

所以我们需要让右列表现得像一个矩形。通常你会将左列的高度设置为100％，这将解决问题，但这不起作用，因为它的父级没有固定的高度。无论如何，设置右列的溢出属性将解决此问题。

.right {
    overflow:hidden;
}

2）如果没有JavaScript或使用表格布局，将图像设置为垂直居中是不可能的。但是你可以做的是：通过将其可见性设置为隐藏来隐藏图像，这样左列仍将采用其宽度。然后将父容器的背景图像设置为图像并将其置于中心位置。

.container {
    background:url("http://www.sourcegate.com/images/stackoverflow-logo.png") left center no-repeat;  
}

结束了非js，非表格解决方案，但是如果你想在某个地方发现你想要尝试javascript，那么有很多方法可以做到，但这就是我要做的：（1行代码）

$(".container").css('padding-left', $('img').width() + "px");

http://jsfiddle.net/GtEdc/

Answer 2

YAML CSS Framework有一个适用于IE7的解决方案。如果您不想实现整个框架，您应该能够从他们的示例中获得一些想法（位于Equal Height Grids部分的Grids Module下）。

Answer 3

你确定你不能在这里考虑jQuery吗？看看如果这样做有多么简单。

$(".column").height(Math.max($(".image").height(), $(".description").height()));
$(".column").width(Math.max($(".image").width(), $(".width").width()));

这两行代码将产生两个相等高度，相等宽度的列。我总是讨厌当我读到一个忽略这个问题的答案时，我在这里做。但这只是BEGGING编写脚本。

Answer 4

我无法在IE7中测试这个，因为我有IE8，但试试看：

http://jsfiddle.net/ZXfFG/1/

我会回复你垂直居中的图像，因为这是IE的另一个问题，但它应该像vertical-align: middle

一样简单

HTML：

<div class="container">
    <img src="http://www.sourcegate.com/images/stackoverflow-logo.png" />
    <div class="text">
        <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. Lorem ipsum. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog. This is filler text. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog. Dolor ipsum valorum. The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

CSS：

body
{
    overflow-x: hidden;
}
.container
{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.container img
{
    float: left;
    max-width: 50%;
    vertical-align: middle;
}
.text
{
    max-width: 50%;
    float: right;
}

Answer 5

如果您不知道来自后端的宽度，则可以使用最小宽度。

并排div，等高，IE7 +

5 个答案: