css - 并排 div，等高，IE7+

Question

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

左栏有图片，右栏有描述

然而，挑战很少:我们不知道任何像素尺寸，并且描述可能很长，这就是为什么我们不能简单地并排 float 两个 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/

解释:

所以你有 2 个问题:1) 调整 2 列的宽度和高度。 2) 垂直定位图像。

解决方案:

1) 左列的宽度会自动调整，因为它会调整到其子项(图像)的宽度。将其 float 属性设置为 left 会将文本贴在它旁边。当文本比图像短时这很好，但是如果它像您提到的那样长怎么办？然后你会得到这样的东西:

所以我们需要让右边的列表现得像一个矩形。通常，您会将左列的高度设置为 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/