Как правильно поплавать два столбца бок о бок с помощью css

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

Скажем, у нас есть такая структура:

<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%, он опустится на следующую строку:/

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

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

Смотрите: 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?

Ответ 3

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

Ответ 4

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

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