2 divs выровнены бок о бок, как сделать правую ширину заполнения заливки 100%?

Мне интересно, как лучше всего это сделать...

У меня есть 3 div s:

a div#container с width=100%;, который содержит 2 внутренних div s
a div#inner_left с width изменяется динамически, но не более 200px (будет содержать изображение продукта)
a div#inner_right, где ширина должна заполнить остальную часть пространства в контейнере (будет содержать текст для описания отображаемого продукта)
```
#container {
   width:100%
}

#inner_left {
    display:inline-block:
    max-width:200px;
}

#inner_right {
    display:inline-block;
    width:100%; 
}
```

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

Любая помощь для CSS noob очень ценится!

Ответы

Ответ 1

Посмотрите на " макеты жидкостей" он может описать, о чем вы говорите.

Вероятно, вы ищете этот.

В вашем примере попробуйте настроить отображение в строке. Однако вы не сможете технически использовать элементы уровня блока в нем, поэтому посмотрите на ссылки, которые я разместил выше.:)

Проблема с установкой ширины на 100%, если вы используете float, состоит в том, что она считается 100% контейнера, поэтому она не будет работать, так как 100% включает в себя левую ширину div.

Изменить: Вот пример другого ответа, я отредактировал его, чтобы включить html/css из примера сайта выше для простоты.

Я также включу его ниже:

HTML

<div id="contentwrapper">
    <div id="contentcolumn">
        <div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
    </div>
</div>
<div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>

CSS

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

Ответ 2

Я действительно не видел хорошего решения в ответах здесь. Поэтому я поделюсь с вами.

Лучший способ сделать это - использовать параметр table-cell в CSS. Одна важная вещь, которую нужно добавить, - это "минимальная ширина" элемента, который имеет ширину пикселя.

Пример:

<div id="left">
    Left
</div>
<div id="right">
    right
</div>

CSS

#left {
    display: table-cell;
    min-width: 160px;
}
#right {
    display: table-cell;
    width: 100%;
    vertical-align: top;
}

Ответ 3

Итак, хотя я хотел сделать это только с помощью CSS, я просто использовал таблицы...

Ответ 4

Это может быть выполнено с помощью Flex-Box, который был введен с CSS3 и в соответствии с Могу ли я использовать - это кросс-браузер.

.container { 
  display: flex; 
}

.left {
  width: 100px; /* or leave it undefined */
}

.right { 
  flex-grow: 1;
}

/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}

<div class="container">

  <div class="left">100px</div>
  <div class="right">Rest</div>
  
</div>

Ответ 5

Использовать плавающее:

#container{
width:100%
}

#inner_left{
float:left;
max-width:200px;
}

#inner_right{
float:left;
width:100%; 
}

Изменить: прочитайте это, это хороший маленький справочник: quirksmode

Ответ 6

вам нужно предоставить позицию: абсолютное свойство стиля для обоих div

Ответ 7

Это основано на ответе @w00. +1 друг.

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

.sidebyside-left-fixed, .sidebyside-right-fixed
{
    display: table-cell;
    width: 100%;
}

.sidebyside-left-fluid , .sidebyside-right-fluid
{
    display: table-cell;
    vertical-align: top;
    white-space: nowrap;
}

Ответ 8

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

Ссылка на образец: https://jsfiddle.net/collinsethans/jdgduw6a/

Здесь часть HTML:

<div class="wrapper">
    <div class="left">
        Left Box
    </div>

    <div class="right">
        Right Box
    </div>

</div>

И соответствующий SCSS:

.wrapper {
    position: relative;
}

$left_width: 200px;
.left {
    position: absolute;
    left: 0px;
    width: $left_width;
}
.right {
    margin-left: $left_width;
}

Если вы не используете препроцессоры CSS, замените $left_width своим значением (200px здесь).

Кредит: он основан на http://htmldog.com/examples/pagelayout2/. Там есть еще несколько полезных.