Выравнивание div внутри двух div с разными числами

Question

Выравнивание div внутри двух div с разными числами

0

Привет всем, у меня есть три divs со вторым div в середине двух divs с разными поплавками. Я хочу, чтобы ширина второго div была занята до третьего div. Мне нужно использовать ширину auto для второго div, так как это должно быть одинаковым при каждом масштабировании. Также проверьте мою скрипту: http://jsfiddle.net/mailtoshebin/VZn4e/1/

<div id="main">
    <div id="left">1</div>
    <div id="middle">
        <div id="middleTop">
            <div>This div should reach till right div</div>
        </div>
        <div id="middleBottom">
            <div id="middleBottomSub">this goes right this goes right this goes right</div>
        </div>
    </div>
    <div id="right">3</div>
</div>

Shebin Mathew 12 нояб. 2013, в 15:26

Источник

Теги:

html

css

css-float

2 ответа

4

Вы можете отобразить #middle качестве элемента блока и установить его левое и правое поля на 50 пикселей. Это даст вам желаемый эффект, если вы переместите #right div выше #middle.

CSS:

#left {
    float: left;
    width: 50px;
    height: 150px;
    background-color:#f0f;
     display:inline-block;
}
#right {
    width: 50px;
    height: 150px;
    background-color:#00f;
    float: right;
     display:inline-block;
}
#middle {
    border: 1px solid green;
    margin-left: 50px;
    margin-right: 50px;
    width: auto;
}

HTML:

<div id="main">
    <div id="left">1</div>
    <div id="right">3</div>
    <div id="middle">
        <div id="middleTop">
            <div>This div should reach till right div</div>
        </div>
        <div id="middleBottom">
            <div id="middleBottomSub">this goes right this goes right this goes right</div>
        </div>
    </div>
</div>

Образец: http://jsfiddle.net/VZn4e/2/

Krzysztof 12 нояб. 2013, в 11:36

Ещё вопросы

Sébastien · Accepted Answer · 2013-11-12T11-27-00.000Z

Ответ Лоло правильный, но вы можете сделать это по-другому с display:table и display:table-cell

Избавьтесь от float в #left и #right, примените display:table-cell вместо этого, а также на #middle. И примените display:table к #main (оставьте HTML без изменений). Вы также должны добавить width:100%; для #main использовать все горизонтальное пространство.

#main {
    min-width: 600px;
    height: 150px;
    position: relative;
    width:100%;
    display:table;
}
#left {
    width: 50px;
    height: 150px;
    background-color:#f0f;
    display:table-cell;
}
#right {
    width: 50px;
    height: 150px;
    background-color:#00f;
    display:table-cell;
}
#middle {
    margin: auto;
    width: auto;
    display:table-cell;
}

JSFIDDLE

Это решение имеет дополнительное преимущество: #left и #right будут расширяться вертикально с помощью #middle контента, если вам это нужно (просто избавиться от фиксированной высоты).

JSFIDDLE