我在为我 future 的网站创建多个框时遇到问题。这是我的 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 个框，依此类推。这些框将包含我的链接，可能还有图片。
在这种情况下，你能帮帮我吗？
最佳答案
给所有的盒子一个共同的类，例如内容框。然后是这样的:
.content-box {
padding:10px;
border:1px solid #bbb;
height:120px;
width:200px;
float:left; /* this is the key */
}
从那里开始。这个想法是通过 float 它们将它们显示在一行中。一旦它们到达容器的右边缘，它们就会溢出到下一行。您可能希望将所有 content-box 元素包装在一个容器中，然后您可以向该容器添加填充/定位，以将这些框作为一个组放在您想要的位置。
删除您所有的 by-id css 规则，您不需要它们(例如 #content-box1 等)。
关于html - 请求帮助 : Multiple Boxes，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16443190/