Question

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

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

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

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

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

Answer 2

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

之后使用

display:inline-block;

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

希望这有帮助

Answer 3

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

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

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

使用CSS将Box与Box对齐

3 个答案: