Как разместить div под двумя div, если слева есть еще один div? - PullRequest
Новая
       7

Как разместить div под двумя div, если слева есть еще один div?

0 голосов
/ 18 февраля 2012

Вот проблема, я получил простую разметку, заголовок, меню, нижний колонтитул и контекст. Меню слева и справа контекст, где внутри должно быть 3 деления: два div должны быть в одном ряду, а третий div должен находиться сразу под ними.

Проблема в том, что третий div попадает в меню.

Вот код, который включает в себя комментарии, pelase, посмотрите, ребята ...... Я чувствую себя полностью обреченным об этом, понятия не имею ... 

<html>
<head>
<style>

div.header{                                 border:1px     solid black }
div.menu{clear:both;float:left;             border:1px solid blue}
div.context{                                border:1px     solid #0099CC}
div.footer{clear:both;                      border:1px solid     red}

div.one {                                   border:1px     solid yellow}
div.two {                                   border:1px     solid purple}
div.three {                                 border:1px     solid green}

</style>
</head>

<body>

<div class="header">
    header 
</div>
<div class="menu"> 
    menu<br>menu<br>menu<br>menu
</div>
<div class="context">
    <div class="one"     style="float:left">Div 1 <BR>Div 1 <BR>Div 1 </div>
    <div class="two"     style="">Div 2</div>
    <div class="three"   style="clear:both">Div 3, what the hell are you doing here     under the menu? You should be just under the Div 1!</div>
</div>
<div class="footer"> 
    footer
</div>

</body>
</html>

Ответы [ 2 ]

1 голос
/ 19 февраля 2012

Если ваше меню будет иметь фиксированную ширину (например, 200 пикселей), вы можете применить margin-left:200px для div.context для выравнивания содержимого для контекста div.

Если ваше меню имеет динамическую ширину, используйте эту CSS: 

div.menu{ 
border: 1px solid blue;
display: inline-block;

}

и для контекста: 

div.context  {
border: 1px solid #0099CC;
display: inline-block;

}

0 голосов
/ 19 февраля 2012

Быстро взгляните на этот пост в блоге, чтобы увидеть разницу между встроенными и блочными элементами.

http://www.techrepublic.com/article/learn-distinctions-between-inline-and-block-html-elements/6094821

По умолчанию HTML отображает свои элементы одним из трех способов:

Inline: эти элементы не заставляют новые строки до или после размещения, и он занимает только столько места, сколько необходимо.
Блок. Новые строки появляются до и после элемента, который занимает всю доступную ширину.
Скрытый: есть некоторые элементы, которые никогда не отображаются в окне браузера, такие как метатеги и разделы скрипта и стиля.

...