2

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

在此处输入图像描述

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

谢谢你。

4

3 回答 3

3

真的很简单，这是我制作的一个快速演示，我将在一秒钟内解释所有内容。

演示

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，因为很多元素都漂浮在空气中。

快乐编码:)

清除...

看看这个小提琴，一切正常

http://jsfiddle.net/mqzJN/

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

http://jsfiddle.net/mqzJN/1

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

所以你使用 clearfix 来解决这个问题，就像在这个小提琴中一样

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

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

于 2013-07-27T16:08:29.397 回答
1

在此处输入图像描述这里

的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-27T16:12:03.873 回答
1

给你！( 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-27T16:13:48.437 回答