CSS бок о бок div с шириной в пикселях и процентах

У меня есть два div (бок о бок) внутри родительского div, я хочу, чтобы правый div занимал 100% оставшегося пространства (т.е. 100% - 200 пикселей) и всегда должен оставаться рядом с левым div (не ниже левого div):

<div id="wrapper" style="width: 100%;">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
    <div style="clear: both;"></div>
</div>


html css fluid-layout
person Faizal Balsania    schedule 17.03.2011    source источник

Ответы (7)


arrow_upward
41
arrow_downward

Поскольку у вас есть только один столбец с фиксированной шириной, поместите его влево, и все. Что касается второго столбца, не указывайте float и width; это гарантирует, что он будет шириной 100%. Но вы должны добавить левое поле; в противном случае второй столбец будет мешать плавающему столбцу, например.

  • фон цвета морской волны появится за синим фоном (выключите синий фон, чтобы понять, что я имею в виду)
  • если второй столбец станет выше первого, дополнительный контент начнет появляться под первым столбцом.

<div id="wrapper">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; margin-left: 200px;"></div>
    <div style="clear: both;"></div>
</div>

person Salman A    schedule 17.03.2011

arrow_upward
2
arrow_downward

сделать родительскую оболочку float. Также вы, вероятно, захотите удалить width: 100% во втором дочернем div. И задайте его ширину в зависимости от количества содержимого внутри. Или у вас может быть процент для обоих дочерних элементов. Пример 30% и 70%.

Демо здесь

person erickb    schedule 17.03.2011
comment
Однако будьте осторожны с добавлением отступов и границ. - person kapa; 17.03.2011

arrow_upward
2
arrow_downward

Добавьте свойства позиции в правый div. Левый div 200px, а правый div занимает оставшееся место.

#right{
    background-color:Aqua;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    left:200px;
}

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

person Hussein    schedule 17.03.2011
comment
Это решение не работает для относительного позиционирования. jsfiddle.net/EpA5F/130 - person Ergec; 23.08.2013

arrow_upward
1
arrow_downward

Итак, в новых браузерах мы сможем использовать display: box; и box-flex: 1,... свойства. В настоящее время я использую это в веб-проекте, где требуется только Chrome, поэтому эта новая вещь CSS3 решила для меня много проблем.

person Guillaume Schuermans    schedule 02.10.2011

arrow_upward
1
arrow_downward

Принятый ответ хорош, но у меня была проблема, когда правый столбец перекрывал мою поднавигацию, поскольку он также плавал.

В современных браузерах теперь можно сделать все элементы плавающими и получить тот же эффект с более крутым CSS. Используя «Ширина: расчет (100% - 380 пикселей);» означает, что вы можете перемещать свои элементы, правильно располагать их и выглядеть круто...

.container { float: left; width: 100%; }
.container__left { float: left; width: 380px; height: 100px; background: blue; }
.container__right { float: right; width: calc(100% - 380px); height: 100px; background: green; }

Демонстрация http://jsfiddle.net/auUB3/1/

person Colin Wiseman    schedule 16.01.2014
comment
Могу я спросить, что вы имеете в виду? Страница, на которую вы ссылаетесь, показывает, что calc поддерживается в IE 10. - person Colin Wiseman; 11.04.2015
comment
Да, и это означает, что он работает с версии IE 10. Старые версии, такие как 7, 8, 9, не работали должным образом. Поэтому, когда вы используете функцию CALC, ваш сайт предъявляет более высокие требования к посетителям, и у некоторых из них могут возникнуть проблемы с этим. - person Manny; 12.04.2015
comment
Честно говоря, меня не волнуют эти пользователи, особенно 7 или 8. Если пользователь использует IE 9, многие мои веб-сайты не будут работать, но это нормально, для 98% пользователей он будет работать идеально. И это по мировой статистике. Я полностью уверен, что мы, разработчики, должны прекратить использовать обратную совместимость, чтобы сайты и другое программное обеспечение работали для людей, которые должны были обновиться 5 лет назад. Мы только себя задушим и удорожим и усложним. Я использовал flexbox на своем последнем сайте, потому что хотел. Никто не жаловался. - person Colin Wiseman; 12.04.2015

arrow_upward
0
arrow_downward

ваш левый div должен иметь float left и его ширину в пикселях с использованием относительной позиции. Ваш правый div должен иметь только относительную позицию и, возможно, скрытое переполнение. Это должно решить вашу проблему. Не нужно использовать использование div, который очищает поплавок.

person Guillaume Schuermans    schedule 17.03.2011

arrow_upward
0
arrow_downward

Если вы хотите, чтобы правый div имел постоянную ширину:

 <div style="position:relative">
   <div class='wrapper'>
      <div style="width: 70%"></div>
      <div style="width: 20%"></div>
      <div style="width: 10%"></div>
      <div style="clear:both"></div>
   </div>
   <div class="constant-width"><div>
 </div>

И CSS

 .wrapper{
     margin-right: CONSTANTpx;
 }
 .wrapper div{
     float:left;
 }
 .constant-width{
     top: 0px; right:0px; position:absolute;
     width: CONSTANTpx
 }

Хорошо работает без границ

JSFiddle

person ZuzEL    schedule 07.04.2015