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。然后，您可以将元素放在此div中，而不设置浮点数。默认情况下，段落末尾会有一个新行，图像后面可以跟一个＆lt; br /＆gt;标签

编辑：

我已经看到问题已更新，请尝试以下操作：

<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; }

抱歉：我刚刚意识到你希望它们垂直而不是水平。完全删除浮动，这应该导致div垂直堆叠。

Answer 4

从＃column1，＃column2和＃column3的CSS规则中删除float，position和top。 Div（和段落）是块级元素，默认情况下将垂直堆叠。

编辑：好吧，我想我现在看到了你的问题...使用你发布的CSS - 而不是使用背景颜色来表示边框，更改＃column1，＃column2，和＃column3 divs使用border并删除填充。另外，添加clear：left：

#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; }

使用边框定位文本/图像

4 个答案: