求教div结合css布局有关问题 _HTML/CSS

求教div结合css布局问题

本帖最后由 u010856150 于 2013-05-27 16:58:45 编辑

<html>

<head>



	<title>无标题</title>



	<style type="text/css">

		.hbox{

			 

		}

		.vbox{



		}

	</style>

<body>



	<div width="100%" height="100%" class="hbox">

		<div width="50%" height="100%" class="vbox">

			<img src="mr.jpg" width="100%" height="50%"/>

			<img src="mr.jpg" width="100%" height="50%"/>

		</div>

		<div width="50%" height="100%" class="hbox">

			<img src="mr.jpg" width="50%" height="100%"/>

			<img src="mr.jpg" width="50%" height="100%"/>

		</div>

	</div>

</body>



</html>

效果是下面这种样子，首先水平布局分两栏，然后左边是垂直布局，右边是水平布局，如何写css？

CSS 布局 div HTML

------解决方案--------------------



<!DOCTYPE html>

<html>

    <head>

       <style>

       		.content{

       		width:300px;

       		height:200px;

       		border:solid 1px red;

       		}

       		.contentLeft{

       		float:left;

       		width:33%;

       		height:100%;

       		border-right:solid 1px #ccc;

       		}

       		.leftTop{

       		width:100%;

       		height:50%;

       		border-bottom:solid 1px black;

       		}

       		.leftbottom{

       		width:100%;

       		height:50%;}

       </style>

    </head>

    <body>

    	<div class="content">

    		<div class="contentLeft">

    			<div class="leftTop"></div>

    			<div class="leftbottom"></div>

    		</div>

    		<div class="contentLeft"></div>

    		<div class="contentLeft"></div>

    	</div>

    </body>