我在为将来的网站创建多个框时遇到问题。这是我的CSS3编码：
#content-box1, #content-box2, #content-box3, #content-box4{
padding:10px;
border:1px solid #bbb;
position:absolute;
margin-top:190px;
height:120px;
}
#content-box1 {
margin-left:212px;
width:200px;
}
#content-box2 {
margin-left:444px;
width:200px;
}
#content-box3 {
margin-left:676px;
width:202px;
}
#content-box4 {
margin-left:676px;
width:202px;
}
这是我的HTML：
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Complex XHTML and CSS Home Page Layout Test</title>
<link href="myflex.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
</style>
<body>
<div id="wrapper">
<div id="header">Header</div>
<div id="content-box1"><p>Box 1</p></div>
<div id="content-box2"><p>Box 2</p></div>
<div id="content-box3"><p>Box 3</p></div>
<div id="content-box4"><p>Box 4</p></div>
<div id="content">
<div id="content-left">
<p>Left Column text here. This could be your site menu...</p>
<p>Menu Item</p>
<p>Menu Item</p>
<p>Menu Item</p>
<p>Menu Item</p>
<p>Menu Item</p>
<p>Menu Item</p>
</div>
<div id="content-main">
<p>Main home page content or image goes here...</p>
</div>
</div>
<div id="footer">Footer text and links can go all the way along here... text text text text
text text...</div>
<div id="bottom"><a title="Acuras Web Development" href="http://www.acuras.co.uk">Acuras Web
Development</a></div>
</div>
<script language="JavaScript" type="text/javascript">
var gDomain="www.qsstats.com";
var gDcsId="dcs37pv2c00000oun93vypyva_4k6d";
var gFpc="WT_FPC";
var gConvert=true;
var gFpcDom = "cumberlandcountyweather.com";
if ((typeof(gConvert) != "undefined") && gConvert && (document.cookie.indexOf(gFpc + "=") ==
-1) && (document.cookie.indexOf("WTLOPTOUT=")==-1)) {
document.write("<SCR"+"IPT TYPE='text/javascript' SRC='http"+
(window.location.protocol.indexOf('https:')==0?'s':'')+"://"+gDomain+"/"+gDcsId+"/wtid.js"+"'>
<\/SCR"+"IPT>");
}
function dcsAdditionalParameters() {}
</script>
<script type="text/javascript" src="/imageserver/common/webtrends.js"></script>
<noscript><img alt="" border="0" name="DCSIMG" width="1" height="1" src="http://www.qsstats.com
/dcs37pv2c00000oun93vypyva_4k6d/njs.gif?dcsuri=/nojavascript&WT.js=No&WT.tv=8.0.2;
WT.qs_dlk=UXr12grIZ2IAAAPMvT4AAAAY;" /></noscript>
</body>
</html>
我们想要做的是，能够创建多个盒子，让我们说第一行至少有3个盒子，第二行是另外3个盒子，依此类推。这些框将包含我的链接，可能还有图片。
在这种情况下，你能帮助我吗？
答案 0 :(得分：1)
将所有方框设为共同的class，例如content-box。然后是：
.content-box {
padding:10px;
border:1px solid #bbb;
height:120px;
width:200px;
float:left; /* this is the key */
}
从那里开始。我们的想法是通过浮动它们来显示它们。一旦它们到达容器的右边缘，它们就会溢出到下一行。您可能希望将所有content-box元素包装在一个容器中，然后您可以向该容器添加填充/定位，以将这些框作为一个组放在您想要的位置。
删除所有by-id css规则，您不需要它们（例如#content-box1等）。
答案 1 :(得分：0)
表格易于控制布局和列数，但可能无法响应（例如，对于小屏幕）。
<table>
<tr>
<td>Box 1</td>
<td>Box 2</td>
<td>Box 3</td>
</tr>
<tr>
<td>Box 4</td>
<td>Box 5</td>
<td>Box 6</td>
</tr>
</table>
display: inline-block和position: relative。使用这些允许更多的流体网格，这有助于屏幕较小的情况 - 但是，您必须更加小心每个块的宽度，就好像它们没有正确校准可能会留下大的空白空间，这将不会看起来不错。
这里的问题是你必须将容器的font-size设置为0，每个框的字体大小为正常12pt（或任何你想要的），例如盒子之间没有间隙。
我个人不会推荐这个，因为所有font-size含糊不清，但我仍然在此处列出因为它可以正常工作。
请注意使用position: relative或不指定位置。 position: absolute 不起作用。
<强> HTML
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<div>Box 4</div>
<div>Box 5</div>
<div>Box 6</div>
<强> CSS
body {
font-size: 0;
}
div {
display: inline-block;
width: 33%;
height: 100px;
font-size: 12pt;
}
在大多数设计师/开发人员中，这三个人最喜欢的选择可能是他们最好的朋友。
使用float: left或float: right基本上可以提供display: inline-block的所有强大功能，而无需切换font-size。
HTML与＃2相同，但CSS：
div {
float: left;
width: 33%;
height: 100px;
}
这显然要短得多。
根据您要完成的任务，三个（或可能是其他选项）中的任何一个都可以。稍微玩一下小提琴，看哪一个最符合您的需求。
最后一点注意事项：关于<td>的一个好处是它们可以垂直对齐内容 - 但这也可以通过{{1}在正常的<div>中完成} {property（参见Vertical alignment of elements in a div）
我完全同意Madbreaks的回答 - 使用类而不是聚合所有ID。它效率更高，看起来更好。