Demo

Question

我正在尝试创建这样的页面布局。

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

谢谢。

Answer 1

非常简单，这是我做的快速演示，我会在一秒钟内解释所有内容。

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/

现在，如果我们像这样添加一个浮点链接

http://jsfiddle.net/mqzJN/1

然后你可以看到背景消失了，因为<div>不再具有任何高度，因为链接在空气中浮动。

所以你使用一个clearfix来解决这个问题，比如这个小提琴

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

因此，任何具有float的元素都可能不会像在最后一个小提琴示例中那样将clearfix类添加到该元素的容器中。

Answer 2

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

Answer 3

你去吧！（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;
}

使用HTML和CSS进行页面布局

3 个答案:

Demo

Clearfix ...