Question

我对CSS有很好的了解，但CSS布局知识却很差。现在我需要以下布局（忽略div大小）

enter image description here

但我得到了这个

enter image description here

这是我的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

现在我有以下问题

为什么默认情况下右侧的div（橙色）未对齐到顶部？我怎么能这样做？
以上div（绿色）涵盖了两个div（蓝色和石灰）。虽然我可以使用margin-top:50px来纠正它，但是当我使用它并且左上角（绿色）div增加高度时，右div（橙色）也会向下移动并用完红色容器。那么正确的方法是什么？
这个是一个普遍的问题，有时让我担心，是否可以给出像400px X 300px那样固定的div尺寸（我们肯定不会增大尺寸）？
< / LI>

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

最后小提琴：DEMO

Answer 2

好吧，将问题1和2的答案结合起来：

将定位与基于浮动的布局混合通常是一个坏主意，这些概念混合不好。副作用包括div的重叠（有时这是期望的，通常不是这样）和盒子的奇怪位置，如所观察到的。

为了避免这些问题，我建议在这种情况下切换到纯浮点用法：

橙色div 获得float:right（和宽度）
顶级绿色div 没有任何特别之处（也许是height）
蓝色div 获得float:left（和宽度）
中绿色自动填充其余部分。添加margin-left和-right，如果它是这三列中最长的一段。

Answer 3

这是我解决这个问题的选择：

#container {
    padding: 25px;
    width:1024px;
    min-height:900px;
    margin-left: auto;
    margin-right: auto;
    background: red;
}
#top-left {
    float:left;
    width:790px;
    height:175px;
    min-height:150px;
    background: lightgreen;
    margin-bottom: 25px;
}
#right {
    float:right;
    min-height: 900px;
    min-width: 200px;
    margin-right: 10px;
    background: orange;
}
#left {
    float:left;
    min-height: 700px;
    min-width:250px;
    background: blue;
    margin-right: 25px;
}
#center {
    float:left;
    min-height: 700px;
    min-width:515px;
    background: lime;
}

这一切都取决于你想要布局的流动程度，但我删除了你的大部分位置属性（通常对浮动不能很好地反应）并添加了一些维度。

http://jsfiddle.net/TNbHZ/1/

Answer 4

我建议为此提供更好的标记。此外，如果可能，您应该避免使用position。

这是我推荐的标记。

<div class="container">
    <div class="main-left">
        <div class="header"></div>
        <div class="content-left"></div>
        <div class="content-right"></div>
    </div>
    <div class="main-right"></div>
</div>

简短的CSS，就在这里：

body{background:#F00}
.container{margin:0 auto; width:1024px;}

.main-left{float:left; width:800px}
.main-right{background:orange; float:right; height:620px; width:200px}

.header{background:green; height:150px; margin-bottom:20px;}
.content-left{background:blue; float:left; height:450px; width:300px}
.content-right{background:lime; float:left; height:450px; width:500px}

注意：当然清算浮动是必要的！

关于jsfiddle的POC：http://jsfiddle.net/mgcq6/

Answer 5

请查看此Solved Fiddle

像这样更改您的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>

CSS

#container
{
    position:absolute;
    top:25px;
    left:25px;
    width:1024px;
    height:100%;
     min-height: 900px;
    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;
    float:left
}
#right{
  margin-top:25px;
    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;
    position:relative;
    margin-top:35px;
}
#center
{
    margin-top:35px;
    position:relative;
  float:left;
    min-height: 700px;
    min-width:500px;
   position:realtive;
    background: lime;
}

需要帮助来获得正确的CSS布局

5 个答案: