Два div, один фиксированной ширины, другой, остальные

97

У меня есть два контейнера div.

Хотя у одного должна быть определенная ширина, мне нужно отрегулировать ее, чтобы другой div занимал остальное пространство. Есть ли способ сделать это?

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}
<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

медведь
источник
4
Не используйте устаревшие хаки для старых браузеров. Прокрутите вниз, чтобы увидеть современное решение Flexbox.
Евгений
1
Прежде чем перейти по ссылке Евгения, подумайте о браузерах, которые на самом деле используют ваши пользователи, а не о тех, которые вы хотели бы использовать. Flexbox не будет хорошо отображаться в IE 9 вашего профессора: caniuse.com/#feat=flexbox
Duhaime
@duhaime IE9 имеет 0,13% глобального использования
Евгений
Итак, 1 из 1000 пользователей ...
Duhaime

Ответы:

127

См .: http://jsfiddle.net/SpSjL/ (настройте ширину браузера)

HTML:

<div class="right"></div>
<div class="left"></div>

CSS:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

Вы также можете сделать это с помощью display: table, что обычно является лучшим подходом: как я могу поместить элемент ввода в ту же строку, что и его метка?

тридцать точек
источник
4
У меня это не работает. Ширина слева составляет 100%, а справа - 250 пикселей. Две строчки :(
медведь
19
Вам нужно поменять местами порядок divs, как в моем ответе и моей демонстрации. rightтогда left.
30
1
В целом это работает для меня, но иногда, когда у меня есть текст в левом div вместо переноса на следующую строку (и есть место), он просто обрезается справа (где начинается правый div). Как мне сделать перенос текста в левом div?
Парень
1
Неплавающий DIV заполняет всю ширину. Плохая идея, когда контент выше плавающего DIV или слишком длинный текст.
netAction
48

Это 2017 год, и лучший способ сделать это - использовать flexbox, совместимый с IE10 + .

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}
<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

Евгений
источник
1
Ваш комментарий к вопросу спас меня от попытки поддержать IE6. Спасибо!
Майк Давлантес
Это тоже хорошо, но calc () намного лучше flex из-за совместимости с IE9 и Chrome 26.
Дон Диланга
У меня это сработало. Даже не нужно было определять ширину .right.
rotaercz
1
Меня убивает то, что в 2017/2018/2019 мы по-прежнему получаем комментарии в духе BEWARE OF IE 9.
Майк Девенни
Вы также можете установить ширину правого div на auto, например "flex: 0 0 auto;".
dijoe
43

Вы можете использовать функцию calc () CSS.

Демо: http://jsfiddle.net/A8zLY/543/

<div class="left"></div>
<div class="right"></div>

.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}

.right {
width:200px;
height:200px;
background:red;
float:right;   
}

Надеюсь, что это поможет вам!!

Шивали Патель
источник
Спасибо за совет. Я проверил совместимость между браузерами, и она довольно высока для стабильного использования
Farside
1
Это следует выбрать как лучший ответ, потому что в этом ответе теги DIV не меняются местами, как в лучшем ответе.
Дон Диланга
14

Если вы можете перевернуть порядок в исходном коде, вы можете сделать это следующим образом:

HTML:

<div class="right"></div> // needs to be 250px    
<div class="left"></div>

CSS:

.right {
  width: 250px;
  float: right;
}   

Пример: http://jsfiddle.net/blineberry/VHcPT/

Добавьте контейнер, и вы можете сделать это с вашим текущим порядком исходного кода и абсолютным позиционированием:

HTML:

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS:

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

Здесь .leftДИВ получает неявно установленную ширину от top, leftи rightстилей , что позволяет ей заполнить оставшееся пространство #container.

Пример: http://jsfiddle.net/blineberry/VHcPT/3/

Brent
источник
Первый пример, похоже, не работает. Div .left в jsFiddle - это фактически полная ширина экрана. Если оба div имеют одинаковую высоту, тогда отлично, но в этом случае просто добавьте отступ 5px к .left, и вы увидите.
user3413723
1
Хотя второе решение отлично сработало для меня. Гений!
user3413723
6

Если вы можете обернуть их в контейнер, <div>вы можете использовать позиционирование, чтобы <div>закрепить левую часть left:0;right:250px, см. Эту демонстрацию . Теперь я скажу, что это не будет работать в IE6, поскольку только один угол <div>может быть абсолютно позиционирован на странице ( см. Здесь для полного объяснения).

Эндиб
источник
3

1- Имейте обертку div, установите отступы и поля, как вам нравится
2- Сделайте левую сторону div необходимой ширины и заставьте ее плавать влево
3- Установите правое поле div, равное ширине левой стороны

.left
{
    ***width:300px;***
    float: left;
    overflow:hidden;

}

.right
{
    overflow: visible;
    ***margin-left:300px;***
}



<div class="wrapper">
    <div class="left">
        ...
    </div>

    <div class="right" >
        ...
    </div>

</div>

Надеюсь, что это работает для вас!

Оскар
источник
1

установите право на определенную ширину и поместите ее, слева просто установите margin-right на 250 пикселей

.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto

}

.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}
метеоролог
источник
убейте тип дисплея в .right и убедитесь, что у вас нет четких настроек нигде, которые могли бы повлиять на .left
meteorainer
у вас есть какая-нибудь обертка div? Есть ли что-то в Интернете, что я могу проверить, или это полностью местное?
метеорайнер
Это полностью локально, однако позвольте мне попробовать поместить его на jsfiddle.
медведь
ха-ха, вы удалили поплавок: верно. Кроме того, не забудьте учесть ширину границ, поэтому, если вы собираетесь оставить их, вычтите ширину из одной из ширины div.
метеорайнер
0

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

.left{
        position: absolute;
        height: 150px;
        width:150px;
        background: red;
        overflow: hidden;
        float:left;
}
.right{
        position:relative;
        height: 150px;
        width:100%;
        background: red;
        margin-left:150px;
        background: green;
        float:right;
}

источник
-1

Используйте простое, это может вам помочь

<table width="100%">
    <tr>
         <td width="200">fix width</td>
         <td><div>ha ha, this is the rest!</div></td>
    </tr>
</table>
Huỳnh H u Ân
источник