扩大格垂直，以适应父容器

我试图创建下面的布局使用CSS：扩大格垂直，以适应父容器

Desired Layout

灰色矩形=集装箱
蓝色矩形=像
白色矩形=内容

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

Achieved Layout

我有两个问题与内容的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：上http://jsfiddle.net/EeLjd/

使用position: absolute：

#snapshot { 
    float: left; 
} 

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

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

来源

2011-11-30 Karle

你至少知道的宽度图片？ – Ryan

我希望有一种方法可以避免这种情况，但在这种情况下使用固定宽度的图像将会很好。 – Karle

如果您知道图像的宽度，你可以做这样的事情内容，并将left设置为wid th的图像，加上填充。在图像上使用float: left。

来源

2011-11-30 18:22:41 Ryan

等高栏总是很痛苦。如果图像宽度是固定的，也许是最简单的方法就是将图像内内容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>

来源

2011-11-30 18:22:47 Andrew

谢谢你的工作！不幸的是，我只能接受一个答案，而我正在使用minitech的解决方案。从概念上讲，我发现HTML的结构更贴近页面上的实际布局。 – Karle

扩大格垂直，以适应父容器

回答

相关问题