Плавающий DIV один рядом с другим - 2 расположение колонки

http://optimalpages.de/DrupalMusi/Плавающий DIV один рядом с другим - 2 расположение колонки

Как я могу поместить основное содержание DIV в середине без него рушится влево, когда осталось врезке короче, чем содержание? Это возможно? Я не хочу использовать фиксированную высоту для навигации, но могу ли я как-то сказать «высота боковой панели = высота контента», или есть более простой способ?

Спасибо!

источник

2013-12-16 user2885690

На самом деле вы плывете только элементы в left без обертки элемента, так что происходит это ..

enter image description here

Вместо этого оберните 2 других элементов внутри элемента обертки и чем float его left

enter image description here

.left_wrap { 
    float: left; 
    width: 30%; 
} 

.right_wrap { 
    float: left; 
    width: 70%; 
} 

.right_wrap > div { 
    border: 3px solid #ff0; 
    height: 100px; 
} 


<div class="main"> 
    <div class="left_wrap"> 
     Hello 
    </div> 
    <div class="right_wrap"> 
     World 
     <div></div> 
     <div></div> 
    </div> 
</div>

Demo

Better Demo

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

enter image description here

Demo

Кроме того, не забудьте clear ваши плавали элементы, просто убедитесь, что вы clear их, вы можете использовать самостоятельно клиринг родительский CSS как

.clear:after { 
    content: ""; 
    clear: both; 
    display: table; 
}

И назовите вышеуказанный класс элементом, содержащим плавающие элементы, в качестве своих детей, где в данном случае, это <div class="main"> так должно быть в настоящее время

<div class="main clear"> 
    <!-- Floated Elements --> 
</div>

источник

2013-12-16 12:02:00

wooowo +1 ... это довольно живописное представление !!! :) – NoobEditor

Эй, спасибо за совет! У меня на самом деле были правильные divs, но я просто использовал float: оставил на самом узле, а не использовал его в div «article» ... Спасибо! Ничего себе, после перезагрузки страницы было множество фотографий, спасибо за огромное объяснение! Сейчас он работает, спасибо :-) – user2885690

-Mayank Спасибо :) @ user2885690 Вы приветствуете :) –

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

#node-29{ 
    float: right; 
    clear: left; 
    margin-left: 0; 
}

Это будет позиционировать DIV-х рядом друг с другом и сохранить основное содержание справа.

источник

2013-12-16 12:01:31 jansmolders86

Это, к сожалению, не работает :-P Решение Mr.Alien работает! – user2885690

Рад, что вы получили его на работу! :) – jansmolders86

Это может быть довольно сложным в зависимости от существующей темы.

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

http://linux.m2osw.com/3columns

Более или менее вам нужен первый DIV, который охватывает левый столбец и содержание. Этот div - тот, который центрируется.

Чтобы сделать это проще, вы можете установить определенную ширину в DIV и вы получите что-то вроде этого:

div.page 
{ 
    width: 900px; 
    margin: 0 auto; 
}

Это будет центр основной DIV.

Для столбца и содержимого оба являются float: left; div. Чтобы «закрыть» лот, вам нужен еще один div перед закрытием главного div. У этого есть стиль, который гарантирует, что основной div имеет правильный размер: clear: both;.

источник

2013-12-16 12:03:20

мы можем использовать поля для установки позиции div. Мы можем либо указать фиксированные поля, либо дать процентное значение, чтобы оно было основано на общем размере экрана.

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    #main 
    { 
    background-color:yellow; 
    } 
    #main 
    { 
    margin-top:100px; 
    margin-bottom:100px; 
    margin-right:50px; 
    margin-left:50px; 
    } 
    </style> 
    </head> 

    <body > 
    <div id="main"> 
    this is how we can display main div in centre 
    </div> 
    </body> 

    </html>

enter image description here

источник

2013-12-16 12:11:00 Lijo

Плавающий DIV один рядом с другим - 2 расположение колонки

ответ

Смежные вопросы