css - 如何 float 一个 div 并堆叠两个剩余的 100% 宽度的 div?

标签 css css-float

我知道如何 float div 以及如何堆叠 div。但我现在不能让他们两个在一起。 我需要的是:

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

它们都放在我的#header 容器中,具有以下规范:

#header {
 width: 100%;
}

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

#first_row, #second_row {
 width:100%
}

最佳答案

给你。

#header {
	width: 100%;
}
#brand, #first_row, #second_row {
	float:left;
}
#brand {
	width: 300px;
	height: 300px;
}
#first_row, #second_row {
	width: calc(100% - 300px);
}
<!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>

关于css - 如何 float 一个 div 并堆叠两个剩余的 100% 宽度的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25971297/

相关文章:

css - flex3 按钮状态

css - 表单显示元素错误

html - ol li 中的 float 跨度在 Firefox 中显示正确,但在 Chrome 中显示不正确

html - 在 iframe 顶部重叠 div

html - 奇怪的 CSS float 问题

CSS 为比屏幕宽的元素添加右边距

html - 在一个页面上适当使用多个样式表

html - 如何使这个 div 不通过右侧的另一个?

html - IE7 错误 - float : left child of float: right parent

html - 如何在不更改 HTML 的情况下对齐同一行上的两个元素