Question

我玩了漂浮，显示，内联阻止，内嵌，阻止了一段时间，似乎无法找到正确的方式来证明＆＃34;在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在整个宽度范围内均匀有什么建议吗？

Answer 1

您可以为3个盒子中的每个盒子提供25％的宽度以适合父div。

#box1 {
  width: 25%;
}

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

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

Answer 2

用以下内容替换你的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;
}

祝你好运！

在div HTML / CSS中对齐div

2 个答案: