CSS - автоматическая ширина плавала (расширяемое поплавок)

StackOverflow https://stackoverflow.com/questions/3457288

  •  27-09-2019
  •  | 
  •  

Вопрос

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

Это возможно с CSS?

В резюме можно сделать поплавок, чтобы расширяться до размера его контейнера? Даже если элемент плавают, если он имеет ширину: Auto он должен расширяться. По крайней мере, так я думаю, что он должен работать.

Это было полезно?

Решение

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

#leftcol{
width:250px;
float:left;
clear:none;
}

#rightcol{
float:left;
overflow:hidden;
width:auto; /* This may or may not work */
}

Другие советы

NUP, я не думаю, что принятый ответ на самом деле работает. Я просто пытался то же самое, и это решение ...

.left { 
    float: left;
}
.right {
    overflow: hidden;
    /* don't float this one */
}

Играйте с кодом здесь: http://jsfiddle.net/simoneast/qphgr/2/

набор overflow:auto; height:auto; Для Floatet Element :)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top