css - 使用 CSS 将框与框对齐

Question

我是 CSS 新手，我正在尝试将我的第一个网站设为 css，但我无法让两个框并排对齐身体，而上面的四个框不会彼此相邻。我玩过 Float 和 position 都没有运气。

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

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

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

Answer 1

刚刚css用我的更新了你的，css它会完美地工作，你做的很少bugs，所以我把这些点整理出来，所以现在它的工作正常更新了你下面提到的css：-

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

只需将其复制到您的样式上，就可以了。