Captain9911

HTML div 分区

  • Oct 12, 2022

关键词：html, div

示例

<div id="container" style="background-color: green; width: 800px">
	<div id="header"">
		<h2 style="margin-bottom: 0">这是一个标题</h2>
	</div>
	<!-- float:left 浮动在左边 -->
	<div id="menu" style="background-color: orange; width: 100px; height: 300px; float: left;">
		<!-- 这里面如果放块级元素，布局会乱 -->
		<b>
			这里是一个小段落
			<br>
			小段落
			<hr>
			还是小段落
			<br>
		</b>
	</div>
	<div id="content" style="background-color: yellow; width: 700px; height: 300px; float: left;">
		这是一个段落
	</div>
	<div id="footer" style="background-color: red; width: 800px; height: 200">
		<p>这里是一个页脚</p>
	</div>
</div>

效果

<div id="header"">

这是一个标题

<!-- float:left 浮动在左边 -->
<div id="menu" style="background-color: orange; width: 100px; height: 300px; float: left;">
	<!-- 这里面如果放块级元素，布局会乱 -->
	<b>
		这里是一个小段落
		<br>
		小段落
		<hr>
		还是小段落
		<br>
	</b>
</div>
<div id="content" style="background-color: yellow; width: 700px; height: 300px; float: left;">
	这是一个段落
</div>
<div id="footer" style="background-color: red; width: 800px; height: 200">
	<p>这里是一个页脚</p>
</div>

</div>

Search