Две плавающие колонны - одна фиксированная, одна свободная ширина - PullRequest
Новая
       4

Две плавающие колонны - одна фиксированная, одна свободная ширина

40 голосов
/ 13 января 2011

Я посмотрел вокруг SO, но я не могу найти тот, который соответствует моему вхождению, у меня два столбца фиксированной ширины (185 пикселей), а другой столбец не имеет фиксированной ширины, однако мне нужно заполнить последний столбецпоследний пробел, например 

...........................................
.---------  ------------------------------.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  ------------------------------.
.+       +                                .
.+       +                                .
.+       +                                .
.---------                                .
...........................................

Первый столбец всегда должен быть на 100% ниже, когда второй столбец заполняет оставшуюся ширину, они оба плавают left, если я изменю размер окна браузера,второй столбец показывает под первым столбцом.Мне нужен второй столбец, чтобы заполнить оставшуюся ширину и быть гибким при изменении размера окна браузера.

Ответы [ 8 ]

64 голосов
/ 13 января 2011

На самом деле есть более простой способ сделать это, чем использовать поплавки: 

.container {
    position: relative;
}

.left {
    width: 185px;
    position: absolute;
    top: 0;
    left: 0;
}

.right {
    margin-left: 185px;
}
8 голосов
/ 02 июля 2013

Используя отрицательные поля из этого урока CSS может выглядеть следующим образом 

html, body, .container {
    height:100%;
    padding:0;
    margin:0;
}
.container {
    min-width: 300px;
}
.left {
    float:left;
    width: 185px;
    margin-right: -185px;
    height:100%;
}
.right {
    margin-left:185px;
}

http://jsfiddle.net/Y5FAT/1/

http://jsfiddle.net/Y5FAT/

6 голосов
/ 13 января 2011

Отредактировал решение, на этот раз с помощью flexbox, исправил левый столбец с помощью flex: 185px 0 0;, затем автоматически увеличил правый столбец с помощью flex-grow:1

*{
  box-sizing: border-box;
}

body{
  padding:0;
  margin:0;
}

#container{
  display:flex;
}

#left{
  height: 100vh;
  flex: 185px 0 0;
  background-color:tomato;
}

#right{
  flex-grow: 1;
}

#right > div{
  background:pink;
}
  <body>
    <div id="container">
      <div id="left"> Left </div>
      <div id="right">
        <div>
        Right <br/>
        dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf  dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf 
        </div>
      </div>
    </div>
  </body>
2 голосов
/ 06 февраля 2014

«Позиция: абсолютная;»Ответ довольно хороший, но он имеет кросс-браузерные последствия, особенно если вы разрабатываете для IE.Лучший способ сделать это: 

<html>
<head>
<style>
    div.right {
        float: right;
        width: 200px;
    }
    div.left {
        margin-right: 200px;
    }
    div.clear {
        clear: both;
    }
</style>
</head>
<body>
    <div class="right"><!--your code here--></div>
    <div class="left"><!--your code here--></div>
    <div class="clear"></div>
</body>
</html>

Обратите внимание, что нужный вам div с правой стороны вызывается первым в HTML.Также обратите внимание на очистку float после столбцов, которая пригодится, если у вас есть содержимое ниже или если есть родительский контейнер.

2 голосов
/ 13 января 2011

Посмотрите на это . Демо-версий нет, но я уже пользовался уроками от этого парня, поэтому я предполагаю, что они работают нормально. Из статьи я понял, что основное содержание - жидкое. Боковое содержимое также может быть жидким, но я думаю, что вы можете просто дать ему фиксированную ширину и оставить на этом. Хитрость заключается в том, чтобы сначала разместить основной контент.

1 голос
/ 26 июня 2014

Я испробовал почти все вышеперечисленное решение, пока не наткнулся на это, и оно прекрасно работает для меня. Как сделать div, чтобы заполнить оставшееся горизонтальное пространство (очень простая, но раздражающая проблема для экспертов CSS)

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

1 голос
/ 14 июня 2013

Хорошо, одобренный ответ - хороший, но для тех, кто ищет больше, вот ссылкаНадеюсь, вы найдете это полезным.;)

http://www.dynamicdrive.com/style/layouts/category/C13/

1 голос
/ 08 мая 2013

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

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        white-space: nowrap;
      }
      div.left {
        display: inline-block;
        width: 200px;
        white-space: normal;
        background-color: red;
        vertical-align: top;
      }
      div.right {
        display: inline-block;
        white-space: normal;
        background-color: green;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div class="left">
      left
    </div>
    <div class="right">
      right
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...