1

レイアウト用にボックス モデルを設定する方法がわかりません。

表示される「[container|x]」要素はプレースホルダーであり、後で php に置き換えられます。

これがどのように見えるべきかのスケッチです：

http://tinypic.com/r/21j3vkl/5

私はそれをグーグルで検索して、ここでスタックオーバーフローを検索しようとしました。もちろん、ボックスモデルとそれに関する問題について多くのことを見つけましたが、ここでは何も役に立ちませんでした.

これは私がすでに持っているものです：

html: 

<div class='headerimage'>
[container|1]
</div>


<div class='mainwrapper'>

<div class='femininHead'>
[container|2]
</div>

<div class='lineH1'> </div>


<div class='feminin'> 

<div class='femininSub1'>
[container|3]
</div>

<div class='lineV1'> </div>

<div class='femininSub2'>
[container|4]
</div>

<div class='lineV2'> </div>

<div class='femininSub3'>
[container|5]
</div>

</div>

<div style='clear:both;'></div>


<div class='maskulinHead'>
[container|6]
</div>

<div class='lineH2'> </div>






<div='maskulin'> 

<div class='maskulinSub1'>
[container|7]
</div>


<div class='lineV3'> </div>

<div class='shopButton'>
[container|8]
</div>

</div>

<div style='clear:both;'></div>

<div class='unisexHead'>
[container|9]
</div>


<div class='lineH3'> </div>


<div class='unisex'>


<div class='unisexSub1'>
[container|10]
</div>

<div class='lineV4'> </div>

<div class='unisexSub2'>
[container|11]
</div>

<div class='lineV5'> </div>


<div class='unisexSub3'>
[container|12]
</div>

</div>
</div>

CSS:

.headerimage {
position:absolute;
left:0px;right:0px;
background-color:#000000;
height:367px;
}

.mainwrapper{
position:relative;
top:367px;
}

.femininHead {
position:relative;
width:800px;
height:87px;
top:50px;

}

.femininHead .image1_headline{
line-height:30px;
font-size:24px;
position:relative;
}

.feminin {
position:relative;
}

.lineH1{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
bottom:2px;
}


.femininSub1 {
position:relative;
width:266px;
height:125px;

float:left;
}

.lineV1{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
height:128px;
width:1px;
background-color:#000000;
position:relative;
}

.femininSub2 {
position:relative;
width:266px;
height:125px;

float:left;
}

.lineV2{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
height:128px;
width:1px;
background-color:#000000;
position:relative;
}

.femininSub3{
width:266px;
height:125px;
position:relative;

float:left;
position:relative;
}

.maskulinHead {
position:relative;
width:800px;
height:87px;

top:127px;
}

.maskulinHead .image2_headline{
line-height:36px;
font-size:36px;
right:300px;

}

.lineH2{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
top:133px;
}


.maskulin {
position:relative;
}

.maskulinSub1 {
position:relative;
width:266px;
height:125px;

float:left;
position:relative;
}

.lineV3{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
position:relative;
height:128px;
width:1px;
}

.shopButton {
width:536px;
height:218px;
float:left;

position:relative;
}

.unisexHead{
width:259px;
height:125px;
position:relative;
line-height:36px;
font-size:36px;

}

.unisexHead .image3_headline{
line-height:36px;
font-size:36px;
}

.lineH3{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
top:594px;
}


.unisex {
position:relative;
}

.unisexSub1
position:relative;
width:266px;
height:125px;
float:left;

}

.lineV4{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
background-color:#000000;
position:relative;
height:128px;
width:1px;
}

.unisexSub2 {
position:relative;
width:266px;
height:125px;

float:left;

}

.lineV5{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
background-color:#000000;
position:relative;
height:128px;
width:1px;
}

.unisexSub3{
width:266px;
height:125px;
position:relative;

float:left;
}

前もって感謝します ：）

4

2 に答える 2

1

box-model がこれに役立つ理由がわかりません。多分あなたはFlexBoxを探しています! または、クラシックに移行display:inline-blockして、ネストされたボックス (3,4,5,7,8,10,11,12) と他のすべての行 div に使用します。

ただし、フロートはもう使用しないでください。

于 2013-07-09T21:14:06.420 に答える
0

JSBin でこの単純化されたソリューションを確認してください。

基本的な考え方は、最初のボックスを除くすべてのアイテムを含むラッパーでラップすること.wrapです。auto固定幅の水平マージンにより、ページの中央に配置されます。その中で、横に並んだボックスを左にフロートさせ、固定幅にします。それらの下の div は、float.

この例がお役に立てば幸いです。

于 2013-07-09T21:45:38.570 に答える