CSS бок о бок с шириной пикселей и процентами

У меня есть два 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>

Ответ 1

Поскольку у вас есть только один столбец с фиксированной шириной, поплавьте его, и это все. Что касается второго столбца, не указывайте 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>

Ответ 2

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

Демо здесь

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

В современных браузерах теперь вы можете перемещать все элементы и получать одинаковый эффект с более прохладным CSS. Использование "width: calc (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/

Ответ 7

Если вы хотите, чтобы у правого 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