Расширить div до максимальной ширины, когда установлен float: left - PullRequest
Новая
       19

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

111 голосов
/ 19 июня 2009

У меня что-то подобное: 

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

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

style=width:100%

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

Ответы [ 10 ]

137 голосов
/ 19 июня 2009

Надеюсь, я вас правильно понял, взгляните на это: 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>
96 голосов
/ 11 апреля 2012

Самый кросс-совместимый способ, который я когда-либо делал, не очень очевиден. Вам необходимо удалить число из второго столбца и применить к нему 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>
30 голосов
/ 28 февраля 2013

Решение без фиксации размера на вашем поле 

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

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

6 голосов
/ 19 июня 2009

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

В частности, «Жидкостный двухколонный макет».

ура!

4 голосов
/ 19 ноября 2017

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

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>
4 голосов
/ 04 марта 2014

Это обновленное решение для HTML 5, если кто-то заинтересован и не любит "плавать".

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

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

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

http://jsfiddle.net/EAEKc/596/ оригинальный исходный код от @ merkuro

3 голосов
/ 12 декабря 2010

И исходя из решения 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.

1 голос
/ 19 апреля 2015

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

0 голосов
/ 21 сентября 2016

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

    .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>
0 голосов
/ 25 сентября 2014

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

    div{
    display:inline-block;
    width:100%;
    float:left;
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...