Question

我正在尝试使用CSS创建以下布局：

Desired Layout

灰色矩形=容器
蓝色矩形=图像
白色矩形=内容

不幸的是，我能够管理的最好的是：

Achieved Layout

我对内容div有两个问题：

如何使内容div位于图像的右侧而不用硬编码宽度。
如何使内容div垂直展开以填充容器。

如果已经提出类似的问题，请道歉。我在这里读过类似的问题，但它们似乎都与其他布局问题有关。

HTML：

<html>
  <head>
    <title>Test</title>
    <link href="test.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <div class="solid">
      <img id="snapshot" src="page.jpg">
      <div class="content" style="margin-left: 165px;">
        Test
      </div>
      <br style="clear:both"/>
    </div>
  </body>
</html>

CSS：

#snapshot {
  float: left;
}

div.solid {
  padding: 5px;
  border: 1px solid black;
  background-color: #E8E8FF;
}

div.content {
  border: 1px solid black;
  background-color: #FFFFFF;
}

Answer 1

如果您知道图像的宽度，可以执行以下操作：http://jsfiddle.net/EeLjd/

对内容使用position: absolute，并将left设置为图片的宽度以及填充。在图片上使用float: left。

Answer 2

等高柱总是很痛苦。如果图像宽度是固定的，也许最简单的方法是将图像放在内容div中，然后将其推回到左边，带有负边距：

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div class="solid">
      <div class="content" style="margin-left: 165px">
      <img id="snapshot" src="page.jpg" style="margin-left: -165px;">
        Test
        <div style="clear:both"></div>
      </div>
      <div style="clear:both"></div>
    </div>
  </body>
</html>

垂直扩展div以适合父容器

2 个答案: