Question

enter image description here

我想创建下一个愿景的html页面。 div 1,2和3在一行中的位置已经完成，但是对于第4个div，我有一些麻烦而且无法实现。

Answer 1

你真的应该发布你的代码，看看它有什么问题。但我为你做了一个例子。

在这里，你可以使用浮动。

Html代码：

<div id="wrapper">
    <div id="first">
    </div>
    <div id="second">
    </div>
    <div id="third">
    </div>
    <div id="fourth">
    </div>
</div>

Css代码：

#wrapper{width:300px; margin:0;}
#first { height:300px; width:100px; background:black; float:left;}
#second{ height:250px; width:100px; background:red;float:left;}
#third{ height:250px; width:100px; background:green;float:left;}
#fourth{ height:50px; width:200px; background:blue;float:left;}

正在使用 DEMO

Answer 2

这是一个使用非固定高度和宽度的示例。关键是将子部分包装在divs中并相应地设置样式。 div毕竟是分裂的缩写。

<div class="left">
     1
</div>
<div class="right">
    <div class="second-third-wrapper">
        <div class="second">
            2 
        </div>
        <div class="third">
            3
        </div>
    </div>
    <div  class="fourth">
        4
    </div>
</div>

http://jsfiddle.net/Pb5NX/2/

divs然后使用百分比高度和宽度来正确调整它们的大小。这些百分比占父元素的一定百分比（<body>，然后继承自<html>），因此父元素高度也需要设置。

body, html {
    width: 100%;
    height: 100%;
}
.left {
    background-color: blue;
    width: 50%;
    height: 100%;
    float: left;
}

如果您希望它们具有固定的尺寸，您只需在特定元素上设置特定的height和width样式，其余的百分比就会完成。

在一行中创建div，在底部创建第四个div。 CSS / HTML

2 个答案: