css - 盒子模型的问题

Question

我不知道如何为我的布局设置盒模型。

你看到的“[container|x]”元素是占位符，后来被php取代了。

这是它应该是什么样子的草图:

我试着用谷歌搜索它并在此处搜索堆栈溢出，当然我确实找到了很多关于盒模型和它的问题，但这里没有任何帮助。

这是我已经拥有的:

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;
}

提前致谢:)

Answer 1

不明白为什么盒子模型可以帮助你解决这个问题。也许您正在寻找 FlexBox !或者选择经典的方式，对嵌套框 (3,4,5,7,8,10,11,12) 使用 display:inline-block ，而所有其他只是排 div。

但是不要再使用 float 了!