CSS бок о бок с шириной в пикселях и процентах - PullRequest
Новая
       3

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

19 голосов
/ 17 марта 2011

У меня есть два div (бок о бок) внутри родительского div, я хочу, чтобы right div занимал 100% оставшегося пространства (т. Е. 100% - 200px) и всегда должен оставаться рядом с левым div (не ниже left 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>

Ответы [ 7 ]

40 голосов
/ 17 марта 2011

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

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

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

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

2 голосов
/ 17 марта 2011

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

Демонстрация здесь

1 голос
/ 03 октября 2011

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

0 голосов
/ 07 апреля 2015

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

0 голосов
/ 16 января 2014

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

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

.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/

0 голосов
/ 17 марта 2011

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

...