составлены div на одной строке

Question

Я создаю сайт, и у меня есть проблема.

У меня есть составные дивы:

<div id="content">
<div id="left">
    <div id="leftcontent">...</div>
</div>
<div id="center">
    <div id="centercontent">...</div>
</div>
<div id="right">
    <div id="rightcontent">...</div>
</div>

Как я могу поместить левую, центральную и правую линии в одну строку?

какой код мне добавить?

спасибо!

Answer 1

Почему вы используете div? Div имеет отображение блока, но span будет работать лучше, поскольку он встроенный, тогда атрибут float, предложенный Иваном, будет работать хорошо.

Answer 2

Этот CSS должен помочь:

#left {
  width: 20%;
  float: left;
}

#center {
  width: 60%;
  float: left;
}

#right {
  width: 20%;
  float: left;
}

Отрегулируйте ширину соответствующим образом.

Answer 3

Вы можете использовать float атрибут css, например:

#left   { float: left }
#center { float: left }
#right  { float: right }

Answer 4

Другие комментарии отвечают на ваш вопрос, но обратите внимание, что вы не начинаете спуск в div ад ... div, не делающие ничего, кроме как содержат div, могут быть запахом кода.

Answer 5

Альтернативным методом является использование каркаса CSS. Вот некоторые из популярных:

1. http://960.gs/
2. http://www.blueprintcss.org/
3. http://developer.yahoo.com/yui/grids/

Мой любимый случай: Объектно-ориентированный CSS

Рекомендуется использовать систему сеток на основе CSS, поскольку они очень хорошо протестированы для работы в нескольких браузерах.

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