求教div结合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>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Res/Script/jquery-1.9.1.js"></script>
<style type="text/css">
* {
margin:0px; padding:0px;
}
.hbox {
height: 50%;
width: 100%;
float:left;
}
.vbox {
width: 50%;
height: 100%;
float:left;
}
</style>
</head>
<body>
<div width="100%" height="100%" class="hbox" style=" background:#c8f3f3">
<div width="50%" height="100%" class="vbox">
<div style="background: #808080" class="hbox" >A</div>
<div style="background: #2aac3c" class="hbox">B</div>
</div>
<div width="50%" height="100%" class="vbox">
<div style="background: #ffd800" class="vbox">C</div>
<div style="background: #ff0000" class="vbox">D</div>
</div>
</div>
</body>
</html>
