it-swarm.com.ru

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

Мне интересно, что лучший способ сделать это ...

У меня есть 3 divs:

  • div#container с width=100%;, который содержит 2 внутренних divs

  • div#inner_left с width динамически изменяется, но не шире 200px (будет содержать изображение продукта)

  • 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 нуб очень ценится!

39
thedeepfield

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

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

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

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

Edit: Здесь пример другого ответа, я отредактировал его, чтобы включить 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;
}
17
Richard Marskell - Drackir

Я действительно не видел хорошего решения в ответах здесь. Так что я поделюсь своим. 

Лучший способ сделать это - использовать параметр 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;
}
64
w00

Это можно сделать с помощью 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>

3
arcs

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

2
thedeepfield

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

#container{
width:100%
}

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

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

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

0
Damien Pirsy

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

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

.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;
}
0
Valamas

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

Ссылка на образец: 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/ . Есть несколько других полезных.

0
Ethan

вам нужно предоставить свойство position: absolute style обоим вашим div

0
tristan625