Подтвердить что ты не робот

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

.container {
    position: relative;
}

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

.right {
    margin-left: 185px;
}

Ответ 4

Отредактированное решение, на этот раз с помощью 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>

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

"Позиция: абсолютная"; Ответ довольно хороший, но он имеет кросс-браузерные последствия, особенно если вы разрабатываете для 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. Также обратите внимание на очистку поплавка после столбцов, что пригодится, если у вас есть контент ниже, или если есть родительский контейнер.

Ответ 8

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

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