0

私はしばらくの間、float、display、inline-block、inline、blockで遊んでいましたが、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;
}

私はそれを研究しましたが、私はそれを正しく理解することができないようです。

ボックス12と3を、提案の幅全体に均等に配置したいですか？

4

2 に答える 2

0

3つのボックスのそれぞれに、親divに合うように幅の25％を与えることができます。

#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 に答える