Расширить div до максимальной ширины, если установлено значение float: left

115

У меня что-то вроде этого:

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

оба поплавка необходимы. Я хочу, чтобы div с содержимым заполнил весь экран за вычетом этих 100 пикселей для меню. Если я не использую float, div расширяется именно так, как должен. Но как мне установить это, если установлен float? Если я использую что-то вроде

style=width:100%

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

html width Фло
источник

138

Надеюсь, я правильно вас понял, взгляните на это: http://jsfiddle.net/EAEKc/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>

Развернуть фрагмент

merkuro
источник

5

В вопросе говорится, что «необходимы оба поплавка».

Crescent Fresh

8

Да, вы правы, и я согласен. Однако я думаю, что Фло только упомянул об этом, потому что думает, что они оба! нужно было получить желаемый макет и, следовательно, мое альтернативное решение.

merkuro

@merkuro: хороший момент. Я согласен, ".right" не нужно использовать для получения желаемого эффекта. @Flo: вы можете подтвердить, нужно ли размещать div с контентом? Как по другим причинам?

Crescent Fresh

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

Фло

2

Ах, да, и я снова вижу причину, по которой я изменил его на float: IE7 и Firefox работают нормально, но, то есть 5.5 и ie 6, начинают поле с правого края левого div, поэтому оно имеет 236 пикселей (реальная ширина, 100 был примером) разрыв между обоими дивизионами

Фло

100

Самый перекрестно-совместимый способ, который я нашел, не очень очевиден. Вам нужно удалить поплавок из второго столбца и применить overflow:hiddenк нему. Хотя может показаться, что это скрывает любой контент, выходящий за пределы div, на самом деле он заставляет div оставаться в пределах своего родителя.

Используя ваш код, это пример того, как это можно сделать:

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

Надеюсь, это будет полезно для всех, у кого есть эта проблема, я обнаружил, что это то, что я нашел, лучше всего работает для сайта, который я создавал, после попытки настроить его на другие разрешения. К сожалению, это не сработает, если вы также включите плавающее справа divполе после содержимого, и если кто-нибудь знает хороший способ заставить это работать, с хорошей совместимостью с IE, я был бы очень рад это услышать.

Новый, лучший вариант с использованием `display: flex;`

Теперь, когда модель Flexbox реализована довольно широко, я бы рекомендовал использовать ее вместо нее, поскольку она обеспечивает гораздо большую flexгибкость в макете. Вот простой двухколоночный, как в оригинале:

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

А вот и трехколонка с центральной колонкой гибкой ширины!

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>

alanaktion
источник

После некоторого дальнейшего тестирования выяснилось, что вам не нужно запускать hasLayout с "position: relative", чтобы это работало в IE 6, я не уверен насчет IE 5, но, как правило, включить его в любом случае не проблема, просто на всякий случай.

alanaktion

1

Эти ответы кажутся недооцененными, но это действительно полезно знать. Этот позволяет вам плавать даже с плавающим элементом внутри div. Я использую Google "контекст форматирования блока". сейчас.

Карлос Хил

Лучший способ - использовать простую таблицу из двух столбцов вместо того, чтобы тратить время на добавление тонны CSS-трюков, не совместимых с кросс-браузером,

Марко Демайо,

@Marco Мне нужно было использовать для этого CSS, так как мой дизайн адаптивный. Для разных размеров экрана требовались разные макеты, поэтому таблица не работала бы. Кроме того, этот метод работает практически в любом браузере, который все еще используется.

alanaktion

1

@MarcoDemaio, моя точка зрения заключалась в том, что при размере экрана, где фиксированный столбец меньшего размера будет примерно таким же большим, как и основной столбец, например, на мобильном устройстве, я хотел, чтобы два столбца стали строками полной ширины, что не могло быть сделано с таблицами, если я действительно не хочу перемещать контент с помощью JavaScript.

alanaktion

31

Решение без фиксации размера вашей маржи

.content .right{
    overflow: auto; 
    background-color: red;
}

+1 для Меркуро, но если размер поплавка изменится, ваша фиксированная маржа потерпит неудачу. Если вы используете приведенный выше CSS справа, divон красиво изменит размер с изменением размера левого поплавка. Это немного более гибко. Проверьте скрипку здесь: http://jsfiddle.net/9ZHBK/144/

Уилт
источник

2

@alanaktion Забрал ненужное авто. Разница в величине переполнения. Видимо, overflow: hiddenи overflow autoприводят к такому же поведению. Я также думаю, что люди ценят Fiddle.

Уилт,

Если кто-то хочет знать, почему это работает, см. Здесь: stackoverflow.com/a/1767270/2756409

TylerH

Я думаю, это лучше, чем решение Меркуро.

SkuraZZ

6

Плавающие элементы удаляются из обычного макета потока, а блочные элементы, такие как DIV, больше не охватывают ширину своего родителя. В этой ситуации правила меняются. Вместо того, чтобы изобретать колесо, посетите этот сайт, чтобы узнать о некоторых возможных решениях для создания макета с двумя столбцами, который вам нужен: http://www.maxdesign.com.au/presentation/page_layouts/

В частности, «жидкая двухколоночная компоновка».

Ура!

Шон Эйткен
источник

4

Это обновленное решение для HTML 5, если кто-то интересуется и не любит «плавание».

Таблица отлично работает в этом случае, поскольку вы можете установить фиксированную ширину для таблицы и ячейки таблицы.

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

http://jsfiddle.net/EAEKc/596/ исходный код из @merkuro

Snowie
источник

+1 наконец то, что работает с элементом фиксированной ширины справа, даже если он технически не использует float.

Karthik T

+1 так что полностью да. после многих лет борьбы с плавающими, позициями и таблицами это правильное решение. принятое решение распространяет небезопасный CSS.

Гораций

4

это использование может решить вашу проблему.

width: calc(100% - 100px);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      float: left;
      width: calc(100% - 100px);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>

Развернуть фрагмент

suathd
источник

Добро пожаловать в SO. Не могли бы вы пояснить, как это работает?

yacc

3

И на основе merkuroрешения, если вы хотите максимизировать то, что слева, вы должны использовать:

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

Не тестировался в IE, поэтому может выглядеть сломанным в IE.

kubilayeksioglu
источник

1

Принятый ответ может сработать, но мне не нравится идея перекрытия полей. В HTML5 это можно сделать с помощью display: flex;. Это чистое решение. Просто установите ширину для одного элемента и flex-grow: 1;для динамического элемента. Отредактированная версия скрипки merkuros: https://jsfiddle.net/EAEKc/1499/

Кристоф Бюлер
источник

0

Привет, есть простой способ с помощью скрытого метода переполнения в правом элементе.

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }

<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>

Развернуть фрагмент

Санджиб Дебнат
источник

-1

Это может сработать:

    div{
    display:inline-block;
    width:100%;
    float:left;
    }

Киртан-шах
источник

Расширить div до максимальной ширины, если установлено значение float: left

Ответы:

Новый, лучший вариант с использованием display: flex;

Решение без фиксации размера вашей маржи

Новый, лучший вариант с использованием `display: flex;`