DIV встроенный блок + ширина 100%

Я не могу отобразить несколько DIV в одной строке. display: inline-block и float: left не работает. Ширина моего сайта не fixed, поэтому я хочу, чтобы она была динамической, чтобы она соответствовала любой ширине экрана.

HTML:

<div id="all">
    <div id="a">25px</div>
    <div id="b">200px</div>
    <div id="c">
        <div id="c1">100%</div>
        <div id="c2">100%</div>
        <div id="c3">100%</div>
    </div>
    500px
</div>

CSS

DIV {
    margin:5px;
    font-size:10px;
}

DIV#all {
    width:500px;
    border:1px dotted black;
}

DIV#a {
    display:inline-block;
    width:25px;
    height:200px;
    border:1px solid red;
    color:red;
}

DIV#b {
    display:inline-block;
    width:150px;    
    height:200px;
    border:1px solid green;
    color:green;
}

DIV#c {
    display:inline-block;
    width:auto;
    height:200px;
    border:1px solid blue;
    color:blue;
}

DIV#c1 {
    width:auto;
    border:1px dotted blue;
    color:blue;   
}

DIV#c2 {
    width:auto;
    border:1px dotted blue;    
}

DIV#c3 {
    width:auto;
    border:1px dotted blue;   
    color:blue;
}

Live Demos:

ПРОБЛЕМА: http://jsfiddle.net/BC2d9/
RESOLVED: http://jsfiddle.net/RAds3/ (display:table)

Ответ 1

Проблема с вашей текущей попыткой - width: 100%; в третьем столбце div#c. 100% здесь будет 100% от его родителя - который содержит все три столбца. В зависимости от того, какой уровень гибкости вы хотите, у вас есть несколько вариантов.

Если ширина сайта фиксирована, установите фиксированную ширину для третьего столбца.

Если вы хотите, чтобы третий столбец растянулся на его содержимое, установите max-width.

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

Отметьте http://somacss.com/cols.html для большого ресурса в макете столбца CSS.

Ответ 2

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

<div id="all">
    <div id="a">25px</div>
    <div id="b">200px</div>
    <div id="c">
        <div id="c1">100%</div>
        <div id="c2">100%</div>
        <div id="c3">100%</div>
    </div>
    <div style="clear:both;"></div>
    500px
</div>

и CSS:

DIV {
    margin:5px;
    font-size:10px;
}

DIV#all {
    width:500px;
    border:1px dotted black;
}

DIV#a {
    float: left;
    width:25px;
    height:200px;
    border:1px solid red;
    color:red;
}

DIV#b {
    float: left;
    width:200px;    
    height:200px;
    border:1px solid green;
    color:green;
}

DIV#c {
    float: left;
    width:210px; 
    min-height:190px;
    border:1px solid blue;
    color:blue;
    padding: 5px;
}

DIV#c1 {
    width:100%;
    border:1px dotted blue;
    color:blue;
    margin: 0 0 5px 0;   
}

DIV#c2 {
    width:100%;
    border:1px dotted blue;
    margin: 0 0 5px 0;   
}

DIV#c3 {
    width:100%;
    border:1px dotted blue;   
    color:blue;
    margin: 0 0 5px 0;
}

А также LIVE DEMO

Ответ 3

Если ширина вашего сайта исправлена, просто замените 100% на всю оставшуюся ширину в контейнере.
Пример: jsFiddle

Если вы хотите, чтобы он был динамичным и соответствовал любой ширине экрана, я думаю, что это невозможно с чистым CSS. Я сделал это с помощью jQuery:

var containerWidth = $('#all').outerWidth();
var widthLeft = $('#a').outerWidth(true) + $('#b').outerWidth(true);
var widthRight = containerWidth - widthLeft - 20; // 20px = spacing between elements

$('#c').css('width', widthRight+ 'px');
$('#c1, #c2, #c3').css('width', widthRight-10+ 'px'); // 10 = padding on the right side

Измененный CSS:

DIV#c {
    display:inline-block;
    height:200px;
    border:1px solid blue;
    color:blue;
    float: right;
}

DIV#c1 {
    border:1px dotted blue;
    color:blue;   
}

DIV#c2 {
    border:1px dotted blue;    
}

DIV#c3 {
    border:1px dotted blue;   
    color:blue;
}

Удалено width: 100% и установите float:right в #c.

Живая демонстрация: jsFiddle

Ответ 4

Отметьте это обновление. Надеюсь, это достаточно хорошо:)

DIV {
margin:5px;
font-size:10px;
}

DIV#all {
    width:500px;
    border:1px dotted black;
}

DIV#a {
    display:inline-block;
    width:25px;
    height:200px;
    border:1px solid red;
    color:red;
    float:left;
}

DIV#b {
    display:inline-block;
    width:150px;    
    height:200px;
    border:1px solid green;
    color:green;
    float:left;
}

DIV#c {
    display:inline-block;
    width:277px; 
    height:200px;
    border:1px solid blue;
    padding:0 7px 0 5px;
    color:blue;
    float:left;
}

DIV#c1 {
    width:100%;
    margin:5px 0;
    border:1px dotted blue;
    color:blue; 
}

DIV#c2 {
    width:100%;
    margin:5px 0;
    border:1px dotted blue;    
}

DIV#c3 {
    width:100%;
    margin:5px 0;
    border:1px dotted blue;   
    color:blue;
}

Ответ 5

div { float:left; width:10px; height:10px; }

Помогает?