Html 我如何在下面的排列中布局一些div？
我的网页中央有一个主容器div。这已经到位，并包含各种元素 然而，现在我正试图在左侧放置一个大的内容div（div#1），它占据了主容器div的70%左右。我所遇到的困难是正确地设置CSS，使div的#1、#2、#3和#4按下图所示排列： 在这种情况下，对于涉及Div#1-#4的CSS，我应该怎么做？我是否应该将Div#1向左浮动，并将其设置为百分比/固定宽度？和浮动divs#2-4对吗 如果您能提供一些指导，我们将不胜感激 我想说两个包装器，分别为“左”和“右”左浮动，大小正确 把div1放在左边 将第2、3和4部分放在右边Html 我如何在下面的排列中布局一些div？,html,css,Html,Css,我的网页中央有一个主容器div。这已经到位，并包含各种元素 然而，现在我正试图在左侧放置一个大的内容div（div#1），它占据了主容器div的70%左右。我所遇到的困难是正确地设置CSS，使div的#1、#2、#3和#4按下图所示排列： 在这种情况下，对于涉及Div#1-#4的CSS，我应该怎么做？我是否应该将Div#1向左浮动，并将其设置为百分比/固定宽度？和浮动divs#2-4对吗 如果您能提供一些指导，我们将不胜感激 我想说两个包装器，分别为“左”和“右”左浮动，大小正确 把div1放
这应该是可行的，如果不让我知道，这里有一个工作示例，可能会帮助您：
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Floating</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.content{
padding:10px;
margin-top:50px;
width:770px;
margin-left:auto;
margin-right:auto;
border:1px solid black;
}
.content h1{
text-align:center;
}
.content h2{
text-align:center;
}
.content .left{
width:600px;
float:left;
border:1px solid black;
}
.content .right{
width:150px;
float:right;
}
.content .right div{
margin-bottom:10px;
border:1px solid black;
}
.content .clear{
clear:both;
}
</style>
<body>
<div class="content">
<h1>Main Container Div</h1>
<div class="left">
<h2>Div #1</h2>
</div>
<div class="right">
<div><p>Div #2</p></div>
<div><p>Div #3</p></div>
<div><p>Div #4</p></div>
<div><p>Div #5</p></div>
</div>
<div class="clear"> </div>
</div>
</body>
</html>
浮动
*{
保证金：0；
填充：0；
}
.内容{
填充：10px；
边缘顶部：50px；
宽度：770px；
左边距：自动；
右边距：自动；
边框：1px纯黑；
}
.内容h1{
文本对齐：居中；
}
.含量h2{
文本对齐：居中；
}
.内容.左{
宽度：600px；
浮动：左；
边框：1px纯黑；
}
.内容,对{
宽度：150px；
浮动：对；
}
.content.right div{
边缘底部：10px；
边框：1px纯黑；
}
.内容，清楚{
明确：两者皆有；
}
主货柜组
第1分部
第2分部
第3分部
第4分部
第5分部