css header layout width 3 divs

Я пытаюсь создать заголовок с 3 divs: один выравнивается влево, один выравнивается вправо, а другой находится в центре. enter image description here css header layout width 3 divs

страница, например, 1200px черные, красные и желтые прямоугольники 960px и центрированы на странице. Элементы в черном прямоугольнике добавлены влево, Элементы в прямоугольнике yellwo добавлены вправо, и элементы в красном прямоугольнике расположены по центру.

Это хорошее общее тематическое исследование для заголовка сайта

источник

2013-02-17 Vjeetje

Это позволит решить проблему

<div class="header" style="width:1200px;"> 
<div style="width:40%;float:left;" class='black-one'> 
    <div style='float:left;'>Some content</div> 
    <div style="clear:both"></div> 
</div> 
<div style="width:20%;float:left;" class='red-one'> 
    <div style="margin:10px auto;text-align:center">Some content</div> 
    <div style="clear:both"></div> 
</div> 
<div style="width:40%;float:left;" class='yellow-one'> 
<div style='float:right;text-align:right;'>Some content</div> 
     <div style="clear:both"></div> 
</div> 
<div style="clear:both"></div> 
</div>

источник

2013-02-17 11:18:58

У вас есть столбцы, но контент также должен быть соответствующим образом скорректирован для каждого столбца. – kjetilh

Это очень хороший обзор, спасибо! – Vjeetje

Спасибо, но я предлагаю не использовать встроенный css и вместо этого использовать внешний файл css для стиля. Не могли бы вы проголосовать, если это поможет? –

я написал статью об этом некоторое время назад здесь мой код ...

<div id="mainContent"> 

    <div id="col1"> 

    Column 1 

    </div> 

    <div id="col2"> 

    Column 2 

    </div> 

    <div id="col3"> 

    Column 3 

    </div> 

    <div id="clearance" style="clear:both;"></div> 

</div>

А вот CSS для него ....

#mainContent { 

    width: 1000px; 

    margin-right: auto; 

    margin-left: auto; 

    text-align: center; 

} 

#col1 { 

    margin: 10px; 

    float: left; 

    width: 300px; 

} 

#col2 { 

    margin: 10px; 

    float: left; 

    width: 300px; 

} 

#col3 { 

    margin: 10px; 

    float: left; 

    width: 300px; 

}

Надеется, что это помогает ... Phillip Дьюс

источник

2013-02-17 11:18:21

Вы получили столбцы, но содержание также должны быть соответствующим образом скорректированы для каждого столбца. – kjetilh

Попробуйте это ..

<style> 
.header { margin: 0px auto; width: 1200px; } 
.floatt { float: left; margin-right: 5px;} 
.black-one { width: 40%;} 
.red-one { width: 20%;} 
.yellow-one { width: 40%;} 
.clear { clear: both;} 
</style> 

<div class="header"> 
<div class='black-one floatt'> 
Some content 
</div> 
<div class='red-one floatt'> 
Some content 
</div> 
<div class='yellow-one floatt'> 
Some content 
</div> 
<div class="clear"></div> 
</div>

источник

2013-02-17 11:28:31 Kingk

css header layout width 3 divs

ответ

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