0

我已经玩了一段时间的浮动，显示，内联块，内联，块，但似乎无法找到正确的方法来“证明”在 div 中的 div。这是它的 HTML 部分：

<body>
<div id="container">
<div align="center" id="header">
    <h1>This is my header area</h1>
</div>

<nav>
  HOME |
  COC |
  ID CARDS |
  SCHEDULE |
  FORMS |
  CFS |
  MEDIA |
  LINKS |
  CONTACT US
</nav>

<div class="boxes">

<div id="box1">
Content box 1
</div>

<div id="box2">
Content box 2
</div>

<div id="box3">
Content box 3
</div>
</div>

<div id="main">
    <h1>This is the main Div</h1>
    <p>This is my paragraph Area</p>
</div>

<div align="center" id="footer">
    <h3>(This is my footer area)<br>
        Copyright 2012-2013 blah blah blah  </h3>
</div>
</div>
</body>

这是我的 CSS：

body {
font:"Times New Roman", Times, serif;
background-color:#333;
margin: 0;
padding: 0;
color:#06C;


}
nav {
padding:10px;
}

#container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background-color:#0B0B0B;
margin: 0 auto;
text-align: left;

}
.boxes {
width:100%;
display:inline-block;
margin:10px;
padding:10px;

}

#box1 {
width: 150px;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
 }

#box2 {
width: 150px;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
 }

 #box3 {
width: 150px;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
 }

#main {
clear:both;
}

我已经研究过了，但我似乎无法真正做到正确。

我希望框 1 2 和 3 在任何建议的宽度内均匀分布？

4

2 回答 2

0

您可以为 3 个盒子中的每一个赋予 25% 的宽度以适合父 div。

#box1 {
  width: 25%;
}

#box2 {
  width: 25%;
}
...

http://jsfiddle.net/4chjf/1/

于 2012-12-21T21:36:07.003 回答
0

用下面替换你的CSS -

body {
font:"Times New Roman", Times, serif;
background-color:#333;
margin: 0;
padding: 0;
color:#06C;


}
nav {
padding:10px;
}

#container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background-color:#0B0B0B;
margin: 0 auto;
text-align: left;

}
.boxes {
width:100%;
display:inline-block;
margin:10px;
padding:10px;

}

#box1 {
width: 25%;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
margin-left:60px;
 }

#box2 {
width: 25%;
height: 150px;

border:1px;
border-style:dashed;
float:left;
padding-left:25px;
margin:10px;
padding:10px;
 }

 #box3 {
width: 25%;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
 }

#main {
clear:both;
}

祝你好运！

于 2013-02-09T09:46:54.163 回答