html - 定位带有边框的文本/图像

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

试着把这个加到每个盒子里

clear: both;