使用CSS将Box与Box对齐

时间:2012-08-22 09:59:39

标签: css

我是CSS的新手,我正在尝试将我的第一个网站设为css,但我遇到一个问题,让两个盒子并排排列,身体和上面的四个盒子不会留在每个其他。我玩过Float和没有运气的位置。

您可以在此处查看该网站:http://gdisinc.com/barker/default.php

我试图让它看起来像这样:http://gdisinc.com/barker/images/menubar/layout_barker.jpg

你能否告诉我我做错了什么以及如何解决?谢谢!

3 个答案:

答案 0 :(得分:1)

刚刚使用我的css css更新了您的bugs,但很少有css您这样做了,所以我将这些点排除在外,所以现在它的工作正常更新了你的下面提到{ {1}}: -

<强> CSS

div#main {
    margin: auto;
    overflow: hidden;
    width: 902px;
}

div#outerbox {
    background-color: #A2282C;
    border: 2px solid #FFFFFF;
    float: left;
    height: 300px;
    width: 660px;
}

div#innerbox {
    background-color: #4D1516;
    border: 1px solid #000000;
    height: 277px;
    margin-left: 10px;
    margin-top: 10px;
    width: 640px;
}

div#sideouterbox {
    background-color: #A2282C;
    border: 2px solid #FFFFFF;
    float: right;
    height: 300px;
    width: 222px;
}

答案 1 :(得分:0)

首先你处于盒子宽度的极限,试着让它变得更小

之后使用

display:inline-block;

如果框宽度的总和适合容器,则应该没有问题。

希望这有帮助

答案 2 :(得分:0)

没有浮点数和奇怪溢出的解决方案:隐藏语句,只是标准定位......

div#main {
    margin: auto;
    position: relative
    width: 902px;
}

div#outerbox {
    border: 2px solid white;
    height: 300px;
    width: 669px;
    background-color: #A2282C;
    position: absolute;
}

div#innerbox {
    margin: 10px;
    border: 1px solid black;
    height: 277px;
    background-color: #4D1516;
}

div#sideouterbox {
    border: 2px solid white;
    height: 300px;
    width: 222px;
    background-color: #A2282C;
    position: absolute;
    right: 0;
}

div#sideinnerbox {
    margin-top: 10px;
    margin-left: 10px;
    border: 1px solid black;
    height: 280px;
    width: 198px;
    background-color: #4D1516;
}

只需将其复制到您的样式上即可。您应该没问题。