Как правильно разместить две колонки рядом с CSS

Question

Это одна из тех вещей, которые я выучил давным-давно и никогда не задумывался о том, действительно ли я делаю это 1001 * правильным способом.

Допустим, у нас есть такая структура:

<div id="wrapper">
  <div id="sideBar"></div>
  <div id="mainContent"></div>
</div>

Скажем также, что wrapper имеет ширину 600px.

Должен ли я плавать sideBar left и mainContent right, или я должен отпустить их обоих left?

Кроме того, если я установлю фиксированную ширину для sideBar, как я могу заставить mainContent заполнять оставшееся пространство, аналогично тому, как работает таблица? Если я установлю mainContent на display:inline-block и width:100%, он перейдет на следующую строку: /

Примечание. В моем конкретном сценарии я не хочу использовать таблицу.

Answer 1

Вы display:block вместе с float:left, чтобы плавать divs рядом друг с другом.

Проверьте рабочий пример на http://jsfiddle.net/FhL4u/2/

Чтобы mainContent заполнял оставшуюся часть пространства, если известна только первая ширина div, используйте проценты для sideBar и mainContent, например: 20% 80% вместо использования фиксированной ширины. в противном случае вам потребуется решение JavaScript для обеспечения кросс-браузерной совместимости.

Проверьте решение jQuery на http://jsfiddle.net/FhL4u/3/

Answer 2

Я изменяю свой ответ отсюда: Как заставить элемент inline-block заполнить остаток строки?

• Только #sideBar является плавающим.
• Вы не можете настроить эту технику так, чтобы впоследствии иметь столбцы одинаковой высоты, поэтому я и спросил, прежде чем ответить.(ну, вы можете, но вам нужно использовать background-image для искусственных столбцов )

См .: http://jsfiddle.net/qx32C/37/

#wrapper {
    overflow: hidden; /* clear the float */
}
#sideBar {
    width: 100px;
    float: left;
    background: #f0f
}
#mainContent {
    overflow: hidden;
    background: #ccc
}

---

Почему я заменил margin-left: 100px на overflow: hidden на #mainContent?

Answer 3

использование поплавка влево или вправо не имеет значения. у вас есть обертка шириной 600 пикселей. когда вы используете float для обеих боковых панелей и содержат внутри обертки, вы должны убедиться, что ширина боковой панели и содержимого (включая поля и отступы) равна или меньше 600 пикселей. Если нет, второй элемент будет ниже первого. Надеюсь, это поможет ^^

Answer 4

используйте display:flex для двух параллельных поплавков

#wrapper{
width: 600px;
display:flex;
}
#sideBar{
display:inline-flex;
width: 25%;
}
#mainContent{
width:75%;
flex:1;
}