1

私は Web 開発の初心者で、次の問題に直面しています。

幅と高さが不明な親 div があり、この div を次のように 4 つの部分に分割したいと考えています。

    +---------------------------------------------------------------- ------------------------+
    |+--------------------+ +--------------------+ +--------- ---+ +---------------+|
    ||DIV 1 | |部門 2 | |部門 3 | |部門 4 ||
    ||幅: n ピクセル | |幅: n ピクセル | |幅: 50px | |幅: n ピクセル ||
    |+--------------------+ +--------------------+ +--------- ---+ +---------------+|
    +---------------------------------------------------------------- ------------------------+

したがって、div1、div2、および div4 は同じ幅である必要がありますが、div3 の静的な幅は 50px です。

これまで、いくつかのヘルパー コンテナーを使用してこれを達成してきました。

    divA = "位置:絶対; 幅:66.6%"
       divB = "位置:絶対;左:0px;右:50px"
           div1 = "幅:50%"
           div2 = "幅:50%"
       div3 = "位置:絶対;右:0px;幅:50px"
    div4 = "幅:33.3%;右:0px"

まず、div1、div2、および div4 の幅が同じではないため、このソリューションは私のニーズに完全には適合しません。Div1/div2 の幅は (66.6%-50px)/2 < 33.3% ですが、div4 の幅は正確に 33.3% です。

次に、div3 の幅を 2 ​​か所で定義する必要があり、これが少し面倒です。

だから私の質問：

このユースケースを純粋な html/css (テーブルを使用せずに) で解決する方法はありますか?

前もって感謝します、

グリーズ、

ハラルド

4

3 に答える 3

2

古いブラウザーではサポートされていませんが、calc() の使用をお勧めします。3 div の幅は に等しくwidth:calc(33% - 50px / 3)、50 ピクセル幅の div は引き続き に設定できますwidth:50px。

于 2013-07-24T06:27:18.847 に答える
0

マージンプロパティで管理できると思います。

CSS:

.main{
    width: 100%;
    float: left;
}

.div1{
width: 33%;
height: 250px;
background-color:#aaa;
float:left;
margin-right: -20px;
}


.div2{
width: 33%;
height: 250px;
background-color:#bbb;
float:left;
margin-right: -20px;
}

.div3{
width: 50px;
height: 250px;
background-color:#ccc;
float:left;
}

.div4{
width: 33%;
height: 250px;
background-color:#ddd;
float:left;
margin-right: -10px;
}

HTML:

<div class="main">
<div class="div1"><!-- --></div>
<div class="div2"><!-- --></div>
<div class="div3"><!-- --></div>
<div class="div4"><!-- --></div>
</div>
于 2013-07-24T07:09:27.457 に答える