1

中央の div に残りのスペースを幅に残しながら、他の 2 つの div の横に配置するにはどうすればよいですか? また、側面の 2 つの div のいずれかを削除すると、メインの div は残っているスペースを取る必要がありますか?

コード：

<div class="row-fluid">
<div class="span12">
    <div class="sidebar">1</div>
    <div class="content-box">2</div>
    <div class="sidebar">3</div>
</div>
</div>

http://jsfiddle.net/U3Hr5/2/

4

6 に答える 6

1

私の提案は、テーブルをすべて同じ行に配置したいが、高さが異なるため、テーブルを使用することです。HTML:

<div class="row-fluid">
<table style="width: 100%">
    <tr>
        <td class="sidebar">1</td>
        <td class="content-box">2</td>
        <td class="sidebar">3</td>
    </tr>
</table>

CSS:

.sidebar {
    width:225px;
    background-color:blue;
}
.content-box {
    background-color:red;
}

フィドルの編集は次のとおりです。 http://jsfiddle.net/mDpEX/

//反転

于 2013-05-14T12:15:47.327 に答える
0

このようなものが欲しいと思います。

HTML:

<div class="row-fluid">
    <div class="span12">
        <div class="sidebar">1</div>
        <div class="content-box">2</div>
        <div class="sidebar">3</div>
    </div>
</div>

CSS:

.sidebar {
    float:left;
    width:225px;
    background-color:blue;
}
.content-box {
    clear:left;
    background-color:red;
    width:225px;
}

お役に立てれば。

于 2013-05-14T12:10:17.493 に答える
0

これは、JavaScript を使用せずにサイズ変更にレイアウトをどの程度応答させたいか、およびどのブラウザーに対応しようとしているかによって異なります。レイアウトが本質的に静的で、幅の変更に対応したいだけの場合は、次のようなものを使用できます。

http://jsfiddle.net/U3Hr5/4/

HTML

<div class="row-fluid">
    <div class="span12">
        <div class="left sidebar">1</div>
        <div class="content-box">2</div>
        <div class="right sidebar">3</div>
    </div>
</div>

CSS

.span12 {
    position: relative;
}
.sidebar {
    position: absolute;
    top: 0;
    width: 225px;
    background-color:blue;
}
.left{left: 0;}
.right{right:0}
.content-box {
    margin-left: 225px;
    margin-right: 225px;
    background-color:red;
}
于 2013-05-14T12:39:55.460 に答える