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

Question

在此输入图像描述

我想创建下一个愿景的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;}

工作演示

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 个解决方案

解决方案1
1 已采纳 2014-03-08 18:26:38

解决方案2
1 2014-03-08 18:41:38

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-03-08 18:26:38

解决方案2 1 2014-03-08 18:41:38

解决方案1
1 已采纳 2014-03-08 18:26:38

解决方案2
1 2014-03-08 18:41:38