позиционирование текста / изображения с рамкой

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

Удалите float, position и top из правил CSS для # column1, # column2 и # column3. Div (и абзацы) являются элементами уровня блока и по умолчанию будут располагаться вертикально.

РЕДАКТИРОВАТЬ: Хорошо, я думаю, что я вижу, в чем ваша проблема сейчас ... с помощью CSS вы разместили - вместо использования цвета фона для обозначения границы, измените # column1, # column2 и # column3 div для использования границы и удаления отступов. Также добавьте ясно: слева:

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

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

Извините: я только что понял, что вы хотите, чтобы они были вертикальными, а не горизонтальными. Удалите float в целом, и это должно привести к тому, что div будет складываться вертикально.

Answer 4

Если я правильно вас понял, я думаю, что вашим самым быстрым решением было бы заключить все граничные элементы в один div с плавающей точкой, установленной влево. Затем вы можете поместить свои элементы в этот div без плавающего набора. По умолчанию абзацы будут иметь новую строку в конце, а за изображениями может следовать тег
.

Edit:

Я видел, что вопрос был обновлен, поэтому попробуйте это:

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