0

我无法为我未来的网站创建多个框。这是我的 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&amp;WT.js=No&amp;WT.tv=8.0.2;
   WT.qs_dlk=UXr12grIZ2IAAAPMvT4AAAAY;" /></noscript>

   </body>
   </html>

我们试图做的是能够创建多个盒子，假设第一行至少有 3 个盒子，第二行另外 3 个盒子，依此类推。这些盒子将包含我的链接，可能还有图片。

你能在这种情况下帮助我吗？

4

2 回答 2

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，等）。

于 2013-05-08T16:49:27.903 回答
0

三个简单的选项：

1：使用一张桌子。

表格很容易控制布局和列数，但可能没有响应（例如对于小屏幕）。 

<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>

http://jsfiddle.net/ahVNg/

2：使用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;
}

http://jsfiddle.net/yPv9F/

3：使用浮动

可能是大多数设计师/开发人员中这三个人最喜欢的选择，他们声称浮动是他们最好的朋友。

使用float: left或float: right基本上提供了所有强大的功能，display: inline-block而无需切换font-sizes.

HTML 与 #2 中的相同，但 CSS：

div {
    float: left;
    width: 33%;
    height: 100px;
}

这显然要短得多。

http://jsfiddle.net/hLDRy/

结论

根据您要完成的工作，这三个（或其他选项）中的任何一个都可以。玩一下 Fiddles，看看哪一个最适合您的需求。

最后一点：关于<td>s 的一大优点是它们垂直对齐内容 - 但这也可以通过属性在正常<div>s中完成（请参阅div 中元素的垂直对齐）line-height

更新：

我完全同意 Madbreaks 的回答 - 使用类而不是合并所有 ID。它效率更高，看起来也更好。

于 2013-05-08T17:07:29.883 回答