html - 在获得正确的 CSS 布局方面需要帮助

Question

我对 CSS 有一定了解，但对 CSS 布局知之甚少。现在我需要以下布局(忽略 div 大小)

但是我明白了

这是我的 HTML 和 css

CSS:

#container
{
    position:relative;
    top:25px;
    left:25px;
    width:1024px;
    height:100%;
    margin-left: auto;
    margin-right: auto;
    background: red;
}
#top-left
{
    position:relative;
    top:25px;
    left:25px;
    width:700px;
    height:auto;
    min-height:150px;
    background: lightgreen;
}
#right{
    float:right;
    min-height: 900px;
    min-width: 200px;
    margin-right: 10px;
    background: orange;
    /*margin-top: -100px; why this is needed?*/
}
#left{
    float:left;
    min-height: 700px;
    min-width:300px;
    background: blue;
}
#center
{
    float:left;
    min-height: 700px;
    min-width:500px;
    background: lime;
}

HTML:

<div id="container">
    <div  id="top-left">
        This is the top left container which is at correct position
    </div>
    <div id="right" >
    </div>
    <div id="left" >
    </div>
    <div id="center" >
    </div>
</div>

Fiddle

现在我有以下问题

1. 为什么右侧(橙色)的 div 默认没有对齐到顶部？我该怎么做？

2. 上面的 div(绿色)覆盖了两个 div(蓝色和石灰)。虽然我可以使用 margin-top:50px 来纠正它，但是当我使用它并且左上角(绿色)div 的高度增加时，右边的 div(橙色)也向下移动并用完红色容器。那么怎样才是正确的做法呢？

3. 这是一个有时让我担心的一般性问题，是否可以将 div 大小(我们确定不会增加大小)固定为 400px X 300px？

Answer 1

对于您的问题，

• 1) 您没有将结构分成两个“列”，这导致右侧不对齐，因为顶部有一个元素。

• 2) 这是由于使用了 position: relative; 和 top: 25px;/left: 25px; .当您使用这些样式时，您需要更正其下方元素的顶部/左侧。为了抵消这些样式，您可以添加边距，或者如果它们已定位，您只需添加 25px 加上它们之间您想要的任何空间。

• 3) 给它们一个固定大小是可以的，但有一些事情需要考虑:响应式网页设计应该避免使用固定大小，如果你打算在那个 div 中包含内容，以及什么布局需求应该都会影响您的决定。

---

这就是我的做法，但由于移动支持，您可以使用其他方法代替 calc。

(如果没有 calc，您将需要设置固定高度或使用 % 作为边距，但效果相同!)

HTML 结构:

<div class="wrapper">
    <div class="leftSide">
        <header>

        </header>
        <div class="sideBar">

        </div>
        <div class="mainCont">

        </div>
    </div>
    <div class="rightSide">

    </div>
</div>

CSS 用于布局:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

.leftSide {
    width: 70%;
    height: 100%;
}

header {
    width: 100%;
    height: 20%;
    background: mediumSeaGreen;
    margin-bottom: 10px;
}

.sideBar {
    width: 30%;
    height: calc(80% - 10px);
    background: brown;
    float: left;
}

.mainCont {
    width: calc(70% - 10px);
    height: calc(80% - 10px);
    margin-left: 10px;
    background: tan;
    float: left;
}

.rightSide {
    width: calc(30% - 10px);
    height: 100%;
    background: #2b2b2b;
    position: absolute;
    top: 0;
    right: 0;
}

最后是 fiddle :DEMO