盒子模型的麻烦

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

无法理解为什么box-model可以帮助你解决这个问题。也许你正在寻找FlexBox！或者去经典并使用display:inline-block作为嵌套框（3,4,5,7,8,10,11,12），所有其他框只是行div。

但是不要再使用花车了！

Answer 2

查看此simplified solution on JSBin。

基本思路是将包含第一个框的所有项目包装在包含的包装器.wrap中。水平边距auto以及固定宽度将使其居中在页面中。在其中，您将并排的盒子向左浮动并给予它们固定的宽度。他们下面的div需要清除float。

希望这个例子很有帮助。