logo标签列表

将div垂直扩展以适应父容器

csshtml
3

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

Desired Layout

  • 灰色矩形 = 容器
  • 蓝色矩形 = 图片
  • 白色矩形 = 内容

不幸的是，我最能做到的就是这个:

Achieved Layout

我对内容div有两个问题:

  1. 如何使内容div坐在图像的右侧，而不是硬编码宽度。
  2. 如何使内容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;
}
1
你至少知道这张图片的宽度吗？ - Ry-
我本希望可以找到一种避免这种情况的方法，但在这种情况下使用固定宽度的图像也是可以接受的。 - Karle
2个回答
3
如果您知道图像的宽度，可以按照以下步骤操作：http://jsfiddle.net/EeLjd/ 在内容上使用position: absolute，并将left设置为图像的宽度加上填充。在图像上使用float: left。
3

等高列始终是一个难题。如果图像宽度固定，可能最简单的方法就是将图像放在内容 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>
谢谢，这个可行！不幸的是我只能接受一个答案，而我正在使用minitech的解决方案。从概念上讲，我发现HTML的结构更接近页面上的实际布局。 - Karle
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接