html - 3 div , one fixed width

Question

I am not sure if this is possible plainly in html css.

I have 3 divs in one line the 2nd div must occupy 200px width and the first & last div must occupy remaining width .

the remaining two divs are fixed at 100px in fiddle . is there a way to make them fill the remaining of the screen equally on both the sides , so that the 2nd div always remains at center ?

Note : the width of parent div is not fixed .

score 3 · Accepted Answer

証明： http： //jsfiddle.net/5Br5A/

CSS

.image-placeholder{
    background: #0f0;
    width: 200px;
    height : 200px;
    clear:none;
    float: left;
}
.fill-remaining {
    height:200px;
    width:50%;
    clear:none;
}
.fill-remaining.left {
    background:#f00;
    float: left;
    margin-right:-100px;
}
.fill-remaining.left>div {
    padding-right: 100px;
}
.fill-remaining.right {
    background:#00f;
    float: right;
    margin-left:-100px;
}
.fill-remaining.right>div {
    padding-left: 100px;
}

HTML

<div class="fill-remaining left">
</div>
<div class="fill-remaining right">
</div>
<div class="image-placeholder">
</div>

score 1 · Accepted Answer

margin: 0 auto; を使用してください。マージン div は必要ありません: http://jsfiddle.net/gk9t3/3/

score 0 · Accepted Answer

別の div 内に中央の div を追加し、中央に配置しました。これが要件に適合するかどうかを確認してください: http://jsfiddle.net/gk9t3/1/

html - 3 div , one fixed width

3 に答える 3

Related

Reference