擴大格垂直，以適應父容器

我試圖創建下面的佈局使用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

擴大格垂直，以適應父容器

回答

相關問題