HTML5 3 колонки

Question

HTML5 3 колонки

0

У меня проблема с моим сайтом по 3 колонке. Я хотел, чтобы это было только содержание в центре, только левое и правое пустое. Как установить центральную колонку в центр без использования левого поля? как установить максимальную ширину в центральном столбце, чтобы содержимое не превышало правый столбец?

<div class="wrapper">
    <div class="left"></div>
    <div class="center">
        <div id="content1">

        </div>
        <div class="right"></div>
    </div>
</div>

.wrapper {
    display:block;
}

.left, .center, .right {
    margin:0 10px;
}

.left {
    float:left; 
    width:180px;
    position:fixed;
}

.center {
    float:left;
    width:880px;
    margin-left:200px;
}

.right{
    float:left;
    width:180px;
    position:fixed;
}

user2982110 13 нояб. 2013, в 12:29

Источник

0

Вы хотите использовать left и right колонки или вам просто нужно поместить их как пустые, чтобы сделать контент в центре.
Sachin 13 нояб. 2013, в 10:46
0

Есть ли причина не использовать margin-right? Почему бы не использовать отступы для 10 пикселей? И ... я думаю, что вы хотите сохранить левую и правую колонку при прокрутке, верно?
SimonSimCity 13 нояб. 2013, в 10:53

Теги:

html

css

html5

1 ответ

Ещё вопросы

Вы хотите использовать left и right колонки или вам просто нужно поместить их как пустые, чтобы сделать контент в центре.
Есть ли причина не использовать margin-right? Почему бы не использовать отступы для 10 пикселей? И ... я думаю, что вы хотите сохранить левую и правую колонку при прокрутке, верно?

TheFrozenOne · Answer 1 · 2013-11-13T07-54-00.000Z

Есть много способов сделать это. Вы можете использовать что-то вроде 960 Grid System или пытаться работать с CSS flexbox, который действительно хорош, но не поддерживается всеми браузерами прямо сейчас, afaik!

К вашему коду: Почему вы используете позицию: исправлено? Ваш код должен работать, попробуйте удалить его. И установите переполнение в auto на обертке div.

Работы: http://codepen.io/doodlebunch/pen/vGxol

.wrapper { 
  display:block; 
  overflow: auto;
}

.left { 
 float:left; 
 width:180px;
}

.center { 
 float:left;
 width:880px;
 margin: 0 10px;
}

.right{ 
  float:left;
  width:180px;
}

Если вы хотите оставить.left и.right blank, вы можете удалить их и добавить margin: 0 auto; к вашему.content-div.

.content { 
 width:880px;
 margin: 0 auto;
}

Да, это работает, когда у вас есть высота и ширина. Но я оставляю это поле пустым без цвета, при этом центральная часть без поля слева переместится влево.
Затем используйте поле: 0 авто; и удалите левую и правую. Контент-DIV должен быть в центре тогда.