我想创建一个像这样的页面布局。HTML和CSS的页面布局

enter image description here

这是我的HMTL结构 -

<div id="content-three-cols"> 
    <div class="leftcol"> 

    </div> 

    <div class="cols-content"> 
     <div class="banner"> 

     </div> 

     <div class="two-cols"> 
      <div class="rightcol"> 

      </div> 

      <div class="middlecol"> 

      </div>     
     </div>    
    </div>  
</div>

这是迄今为止我的CSS代码 -

.leftcol { 
    display: inline; 
    float: left; 
    min-height: 500px; 
    width: 180px; 
    background: #34ab2b; 
} 

.banner { 
    background: #ffe400; 
    border-bottom: 1px solid #DDDDDD; 
    float: left; 
    width: 750px; 
    height: 150px; 
} 

.middlecol { 
    width: 600px; 
    min-height: 600px; 
    background: #2b73ab; 
} 

.rightcol { 
    width: 150px; 
    min-height: 500px; 
    background: #b2540f; 
    float: right; 
}

添加这个风格我不能让我的期望输出。相反，我的愿望导致此代码为我创建一个混乱的布局。有人可以告诉我怎样才能解决这个问题。

这是JsFiddle

谢谢。

来源

2013-07-27 TNK

真的很简单，这里是我做的一个快速演示，我会在第二个时间里解释一切。

Demo

HTML：

<div class="left"></div> 
<div class="head"></div> 
<div class="center"></div> 
<div class="right"></div>

CSS：

body, html{ 
    height:100%; 
} 

.left, .right, .head, .center{ 
    float:left; // Float all the containers to the left so have a `inline` effect 
} 

.left{ 
    height:100%; 
    width:25%; // Full width minus right and center width 
    background:orange; 
} 

.head{ 
    background:red; 
    height:10%; // Height of header 
    width:75%; // Full width minus left sidebar 
} 

.center{ 
    width:50%; // Full width minus both sidebar's width 
    background:skyblue; 
    height: 90%; // Full height minus header height 
} 

.right{ 
    width:25%; // Full width minus center and left width 
    background:green; 
    height:90%; // Full height minus header height 
}

也注意到，您可能需要有一个Clearfix方便看到，因为很多的元素是浮动在空气中。

编码愉快:)

Clearfix ...

那么看看这个小提琴，一切工作正常

http://jsfiddle.net/mqzJN/

现在如果我们像链接一样添加一个float这

http://jsfiddle.net/mqzJN/1

然后，你可以看到背景消失了，因为<div>没有任何高度上的任何更多的是因为链接在稀薄的空气中漂浮。

所以你使用clearfix在这个小提琴

http://jsfiddle.net/mqzJN/2/

解决这个问题，像这样具有float你可能wan't到clearfix类添加到容器中的任何元素像最后一个小提琴例子那样。

来源

2013-07-27 16:08:29 iConnor

大大工作 – TNK

你能告诉我如何代码工作'。左，.right，。头，.center { 浮动：左; //把所有的容器都放在左边，所以有'inline'效果 }' – TNK

Connor，你能告诉我'clearfix'是如何工作的以及它为什么被使用？ – TNK

enter image description here 这里

的HTML：

<body> 
     <div class="left"> 

     </div> 

     <div class="right"> 
      <div class="upper"></div> 


      <div class="lower"> 
       <div class="innerLeft"></div> 
       <div class="innerRight"></div> 
      </div> 
     </div> 
</body>

的CSS：

body { 
    width: 100%; 
} 
.left { 
    width: 25%; 
    height: 450px; 
    float: left; 
    background-color: #f00; 
} 
.right { 
    width: 75%; 
    height: 450px; 
    float: right; 
    background-color: #4cff00; 
} 
.upper { 
    width: 100%; 
    float: left; 
    height: 100px; 
    background-color: blue; 
} 
.lower { 
    width: 100%; 
    height: 100px; 
    background-color: grey; 
} 
.innerLeft { 
    width: 65%; 
    float: left; 
    height: 350px; 
    background-color: fff; 
} 
.innerRight { 
    width: 35%; 
    float: right; 
    height: 350px; 
    background-color: #000; 
}

来源

2013-07-27 16:12:03

你去那里！（http://jsfiddle.net/aV2Dn/）

<div id="wrapper"> 
    <div id="left_column"></div> 
    <div id="top_bar"></div> 
    <div id="middle"></div> 
    <div id="right_column"></div> 
</div> 

#wrapper{ 
    width:500px 
    height:500px; 
    margin: auto; 
} 
#left_column{ 
    width: 100px; 
    height:500px; 
    background: #34ab2b; 
    position:absolute; 
    left:0px; 
    top: 0px; 
} 

#top_bar{ 
    position: absolute; 
    left: 100px; 
    top: 0px; 
    width: 400px; 
    height:100px; 
    background-color: #ffe400; 
} 

#middle{ 
    position: absolute; 
    left: 100px; 
    top: 100px; 
    width: 300px; 
    height:400px; 
    background: #2b73ab; 
} 

#right_column{ 
    position: absolute; 
    left: 400px; 
    top: 100px; 
    width: 100px; 
    height:400px; 
    background: #b2540f; 
}

来源

2013-07-27 16:13:48 DanielX2010

感谢您的回答。我可以知道哪种方法好吗？位置或浮点数？ – TNK

我总是使用位置（相对和绝对）。它可以让你更好地控制布局（并且使用起来非常简单）。 – DanielX2010

@TNK我敢肯定，当你通过你的编码冒险，你会发现自己。只要注意，如果你使用'position：absolute'，你将花费大量的时间，如果你不想响应......而如果你使用'float'响应包来处理...... – iConnor

HTML和CSS的页面布局

回答

Demo

Clearfix ...

相关问题