Question

我知道如何浮动div以及如何堆叠div。但我现在无法将它们放在一起。我需要的是：

#########################################
#         #         #first_row          #
# #brand  ###############################
#         #        #second_row          #
#########################################

它们全部放在我的#header容器中，其中包含以下规范：

#header {
 width: 100%;
}

#brand {
 float:left;
 width: 300px;
}

#first_row, #second_row {
 width:100%
}

Answer 1

你走了。

＆＃13;

#header {
	width: 100%;
}
#brand, #first_row, #second_row {
	float:left;
}
#brand {
	width: 300px;
	height: 300px;
}
#first_row, #second_row {
	width: calc(100% - 300px);
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div id="header">
		<div id="brand">
			Brand
		</div>
		<div id="first_row">
			First row
		</div>
		<div id="second_row">
			Second row
		</div>
	</div>
</body>
</html>

＆＃13;

Answer 2

只需将你的第一行：第二行：第二行包装成一个带有float：left的div，它将起作用：

<div id="header">

</div>
<div id="brand">
    brand
    <br/>
    brand
</div>
<div id="rows">
    <div id="first_row">First row</div>
    <div id="second_row">second row</div>

</div>

这里有example

Answer 3

你需要在一个div中包装#first_row和#second_row并将其向左浮动。像：

<div id="header">
    <div id="brand">Brand</div>
    <div style="float:left">
        <div id="first_row">First row</div>
        <div id="second_row">Second row</div>
    </div>
</div>

Answer 4

你需要另一个向右浮动的容器，然后你的div将被堆叠：

<div id='header' class='floating-container'>
    <div class='left'>Brand</div>
    <div class='right'>
        <div class='first-row'>First Row</div>
        <div class='second-row'>Second Row</div>
    </div>
</div>

JSFiddle demo

编辑：如果您不想修改右列的大小，请不要：

Second demo

Answer 5

看一下媒体对象：

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

乙

如何浮动一个div并堆叠两个100％宽度的剩余div？

5 个答案: