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

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



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

<div style="float:left">content</div>


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



style=width:100%


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

525   10  

10 ответов:

надеюсь, я вас правильно понял, взгляните на это: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>
135  
2017-08-31 15:40:21

самый кросс-совместимый способ, который я нашел для этого, не очень очевиден. Вам нужно удалить поплавок из второго столбца и применить 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>
93  
2016-11-29 16:37:03

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

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

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

29  
2015-06-29 10:18:32

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

в частности, "жидкого макета".

Ура!

6  
2009-06-19 16:26:33

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

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

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

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

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

4  
2014-03-04 12:14:39

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

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  
2017-11-19 10:20:01

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

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

3  
2013-08-12 07:31:43

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

1  
2015-04-19 16:33:05

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

    .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  
2016-09-21 13:55:14

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

    div{
    display:inline-block;
    width:100%;
    float:left;
    }
-1  
2014-09-25 04:06:27

Comments

    Ничего не найдено.
Click here to cancel reply.