css - 并排 div，等高，IE7+

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/

解释：

所以你有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代码行）

​<code>$(".container").css('padding-left', $('img').width() + "px");​​​​​​​​​​​​​​​​ ​​</code>

http://jsfiddle.net/GtEdc/

Answer 2

YAML CSS 框架有一个在 IE7 中工作的解决方案。如果您不想实现整个框架，您应该能够从他们的示例中获得一些想法（位于等高网格部分的网格模块下）。

Answer 3

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

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

这 2 行代码将生成两个等高、等宽的列。当我阅读忽略问题的答案时，我总是讨厌，而我正在这样做。但这只是乞求编写脚本。

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

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