2

div の境界線をこのようにしたい

                        outer div #info
 ------------------------------------------------------------
 | |-----------------||-----------------||-----------------||
 | |                 ||                 ||                 ||
 | |                 ||                 ||                 ||
 | |                 ||                 ||                 ||
 | |      1 inner    ||      2 inner    ||     3 inner     ||
 | |        div      ||        div      ||       div       ||
 | |                 ||                 ||                 ||
 | |  #leftpannel    ||  #centerpannel  ||  #rightpannel   ||
 | |                 ||                 ||                 ||
 | |                 ||                 ||                 ||
 | |-----------------||-----------------||-----------------||
 |----------------------------------------------------------|

しかし、ブラウザに入れると次のようになります

 ------------------------------------------------------------
 |                    |-----------------||-----------------||
 |                    |                 ||                 ||
 |                    |                 ||                 ||
 |                    |                 ||                 ||
 |                    |      2 inner    ||    3 inner      ||
 |                    |        div      ||      div        ||
 |                    |                 ||                 ||
 |                    |                 ||                 ||
 |                    |                 ||                 ||
 |                    |                 ||                 ||
 |                    |-----------------||-----------------||
 ||------------------|--------------------------------------|
  |                  |                   
  |                  |
  |                  |
  |                  |
  |      1 inner     |
  |        div       |
  |                  |
  |                  |
  |                  |
  |                  |
  |------------------|

これは私のcssです

#rightpannel
{
   width:32%;
   float:right;
   height:390px;
   border: solid;
   border-width:1px;
   border-color:green;
}
#centerpannel
{
    width:32%;
    display:inline;
    margin-left:auto;
    margin-right:auto;
    height:390px;
    border: solid;
    border-width:1px;
    border-color:green;
}
#leftpannel
{
    width:32%;
    float:left;
    height:390px;
    border: solid;
    border-width:1px;
    border-color:green;
}
#info
{
    width:92%;
    height:400px;
    border: solid;
    border-width:1px;
    border-color:red;
    margin:0 auto;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 0px;    
}

これは私のhtmlです

<div id="info">     
    <div id="rightpannel"></div>        
    <div id="centerpannel"></div>       
    <div id="leftpannel"></div> 
</div>

なぜこれが起こっているのか本当にわかりません。事前に助けてくれてありがとう

4

3 に答える 3

3

メインの div の幅は、他の 3 つを含めるには十分ではありません。パディング、マージン、ボーダーはすべて考慮する必要があります。フィドルをセットアップしてテストしますが、最終的には数値を操作して目的の結果を得る必要があります。

ボックスモデルを調べて、より明確に理解することも価値があります

テーブルを使用して div を配置しないでください。そのアマチュアと醜い！テーブルは、表形式のデータに使用されます。終わり。

于 2013-07-22T23:03:51.057 に答える
2

これを試して

#rightpannel {
width:32%;
float:right;
height:390px;
border: solid;
border-width:1px;
border-color:green;
margin-left:1%;
}
#centerpannel {
width:32%;
float:right;
height:390px;
border: solid;
border-width:1px;
border-color:green;
margin-left:1%;
}
#leftpannel {
width:32%;
float:right;
height:390px;
border: solid;
border-width:1px;
border-color:green;
}
#info {
width:100%;
height:400px;
border: solid;
border-width:1px;
border-color:red;
margin:0 auto;
padding: 5px 5px 5px 0;
}

例

margins-padding を少し変更する必要があります。

于 2013-07-22T23:21:00.570 に答える