需要帮助才能获得正确的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（橙色）也会向下移动并流出红色容器。那么正确的方法是什么？

3. 这是一个普遍的问题，有时会让我担心，给定div尺寸（我们肯定不会增加尺寸）可以像400px X 300px那样固定吗？

Answer 1

请检查该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; 
} 

Answer 2

好了，答案结合起来，你的问题1和问题2：

与基于浮动的布局混合定位通常是一个坏主意，这些概念不拌匀。正如观察到的，副作用包括divs的重叠（有时候这是需要的，通常不是）和盒子的奇怪位置。

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

橙格得到float:right（和宽度）
顶绿格没有得到什么特别的（也许height）
蓝格得到float:left（和宽度）
中东的绿色格自动地填补了休息。如果它是这三列中最长的，则添加margin-left和-right。

Answer 3

对于您的问题，

• 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 4

这将是我的选择，以解决这个：

#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 5

我建议这个更好的标记。另外，如果可能的话，您应该避免使用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} 

注：Ofcourse清除浮动是必要的！

POC上的jsfiddle：http://jsfiddle.net/mgcq6/