定位具有邊框的文本/圖像

Question

學習HTML/CSS，無法準確定位頁面邊框內的文本和/或圖像。我首先嚐試將它們垂直疊放在彼此之下，但我不知道如何移動下面的每個框，此時它們正在水平堆疊，直到它們超過最大寬度，我該怎麼辦？ HTML：

<div id="column1"> 
<p>blah blah blah</p> 
</div> 

<div id="column2"> 
<p>blah blah blah</p> 
</div> 
<div id="column3"> 
<p>blah blah blah</p> 
</div> 

CSS：

p { 
font-family: Tahoma; 
font-size: 14px; 
margin: 1px; 
padding: 10px; 
text-align: left; 
background-color: white; 
width: 800px; 
} 

#column1 {float: left; position: relative; width: 200px; padding: 3px; background: gray ; top: 10px;margin: 1px; } 

#column2 {float: left; position: relative; width: 200px; padding: 3px; background: orange; top:50px;margin: 1px; } 

#column3 {float: left; position: relative; width: 200px; padding: 3px; background: gray; top: 100px;margin: 1px; } 

Answer 1

如果我理解正確的話，你，我想你最快的解決辦法是將所有的邊境項目的包裝與浮動一個DIV設置爲left 。然後你可以把你的元素放在這個div裏面，不需要設置浮點數。段落默認情況下在最後會有一個新行，圖像後面可以跟一個< br/>標籤。

編輯：

我見過的問題已經使更新試試這個：

<div id="border"> <div id="column1"> <p>blah blah blah</p> </div> 

<div id="column2"> <p>blah blah blah</p> </div> <div id="column3"> <p>blah blah blah</p> </div> </div> 

<style> 

p { font-family: Tahoma; font-size: 14px; margin: 1px; padding: 10px; text-align: left; background-color: white; 
} 

#border {float: left;} 

#column1 {position: relative; padding: 3px; background: gray ; margin: 1px; } 

#column2 {position: relative; padding: 3px; background: orange; margin: 1px; } 

#column3 {position: relative; padding: 3px; background: gray; margin: 1px; } 

</style> 

Answer 2

嘗試添加這對每個盒子

clear: both;

Answer 3

你讓一切都浮到左邊。試試這個：

#column1 {width: 200px; ...} 

#column2 {width: 200px; ... } 

#column3 { width: 200px; position:relative; padding: 3px; background: gray; top: 100px;margin: 1px; } 

對不起：我只是意識到，你希望他們垂直不水平。完全取下浮子，這應該會導致垂直疊放。

Answer 4

從CSS規則中刪除＃column1，＃column2和＃column3的float，position和top。 Div（和段落）是塊級元素，默認情況下會垂直堆疊。

編輯︰好吧，我想我看看你現在的問題是什麼......使用您張貼的CSS - 而不是使用背景顏色來指示邊框，更改＃column1，＃column2和＃column3 divs使用邊框並刪除填充。此外，添加清除：左：

#column1 {float: left; position: relative; width: 200px; border: 3px solid gray ; top: 10px;margin: 1px; clear:left; } 

#column2 {float: left; position: relative; width: 200px; border: 3px solid orange; top:50px;margin: 1px; clear:left; } 

#column3 {float: left; position: relative; width: 200px; border: 3px solid gray; top: 100px;margin: 1px; clear:left; }