Позиционирование CSS в 3-х столбцах

Я пытаюсь создать трехстрочный веб-макет с CSS. В настоящее время у меня есть следующий:Позиционирование CSS в 3-х столбцах

<HTML> 
<head> 
<style> 
.container { 
    margin: auto; 
    padding: 20px 0 0 220px; 
    position: relative; 
    width: 700px; 
} 
.lefter{ 
    position: absolute; 
    left: 0px; 
    width: 450px; 
    height:50%; 
} 
.righter{ 
    position: absolute; 
    right: 0px; 
    width: 450px; 
    height:50%; 
} 
section { 
    float:left; 
    position:relative; 
    margin-left: 450px; 
    margin-right:450px; 
    top:5px; 
} 
</style> 

</head> 
<body> 
    <div class="containter"> 
    This is the Container Class it takes up a certain portion of the HTML page 
    <div class="left" style="border:1px solid"> 
     <ul> 
      <li>Home</li> 
      <li>Taco Menu</li> 
      <li>Draft List</li> 
      <li>Hours</li> 
      <li>Directions</li> 
      <li>Contact 1</li> 
     </ul> 
    </div> 
    <div class="righter" style="border:1px solid"> 
     <ul> 
      <li>Right1 </li> 
      <li>Taco Menu</li> 
      <li>Draft List</li> 
      <li>Hours</li> 
      <li>Directions</li> 
      <li>Contact 2</li> 
     </ul> 
    </div> 
    <section> 
      Center Column 
    </section> 

</body> 
</html>

В настоящее время выходной выглядит (по аналогии с этим макетом), как это в развернутом окне:

Home    Center Column  Right1 
Taco Menu       Taco Menu 
Draft List       Draft List 
Hours        Hours 
Directions       Directions 
Contact        Contact

Где есть три колонок ABC, соответствующая указанные выше, как так : [A] [B] [C]

При изменении размера браузера, следующие обвалы, (и переставляет столбцы):

Home    Right1   Cen 
Taco Menu   Taco Menu   ter 
Draft List   Draft List   Co 
Hours    Hours    lumn 
Directions   Directions 
Contact    Contact

Перегруппирован как: [A] [C] [B] | Где [B] Обертывает свой текст.

То, что я пытаюсь сделать для столбца B & C, чтобы сохранить их относительные размеры (то есть без упаковки), а для окна браузера добавить ширину полосы прокрутки вместо обертывания центрального столбца (B) и свертывания правого столбца (C) над двумя другими столбцами. Для примера веб-сайта: http://help.gathercontent.com/developer-api/

Чтобы получить это поведение, это функция атрибута position? Относительно других элементов на странице или это еще один атрибут элемента?

Ссылки: http://learnlayout.com/box-sizing.html

источник

2015-05-11 Jeeves

Прежде всего, вы не говорите раздел, который содержит «центр Колум» TEXT ширину, так что нет никакого способа, он будет знать, что ты хотел, чтобы вести себя, как это и остановить обертку. С другой стороны, я бы попробовал более быстрый aproach, который должен был бы написать ваш html по порядку, поскольку он должен быть визуализирован, сделать все разделы или все div и дать им класс, то есть «main-box», и установить их для отображения: inline-block, чтобы они отображали один рядом с другим. С некоторыми хорошими полями вы избегаете играть с позиционированием.

источник

2015-05-11 03:34:35 syrano

Я согласен с тем парнем, который советует вам сделать отзывчивый макет, боковой свиток - ужасный UX. Я не совсем уверен в том, чего вы пытаетесь достичь здесь, это что-то вроде этого?

<HTML> 
    <head> 
    <style> 
    .container { 
    margin: 0 auto; 
    width: 1024px; 
    } 
    .block { 
    padding: 1em; 
    margin-right: 1%; 
    float: left; 
    border: 1px solid #000; 
    display: block; 
    } 

    .center-block { 
    width: 58%; 
    } 

    .left-block, 
    .right-block { 
    width: 15%; 
    } 

    .block:last-child { 
    margin-right: 0; 
    } 

    .cf:before, 
    .cf:after { 
    content: " "; 
    display: table; 
    } 
    .cf:after { clear: both; } 
    .cf { *zoom: 1; } 
    </style> 

    </head> 
    <body> 
    <div class="container cf"> 
    <div class="block left-block"> 
    <ul> 
    <li>Home</li> 
    <li>Taco Menu</li> 
    <li>Draft List</li> 
    <li>Hours</li> 
    <li>Directions</li> 
    <li>Contact 1</li> 
    </ul> 
    </div> 

    <div class="block center-block"> 
    <p>Center Column</p> 
    </div> 

    <div class="block right-block"> 
    <ul> 
    <li>Right1 </li> 
    <li>Taco Menu</li> 
    <li>Draft List</li> 
    <li>Hours</li> 
    <li>Directions</li> 
    <li>Contact 2</li> 
    </ul> 
    </div> 

    </div> 

    </body> 
    </html>

источник

2015-05-11 12:26:35

Позиционирование CSS в 3-х столбцах

ответ

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