3

25% の div が 75% の横に浮かんでいない理由がわかりません。マージンを含む div の幅の合計は、.content div の正しい合計幅になります。マージン、パディング、フロートがどのように連携するかについての情報が不足しているに違いありません。既製のグリッド システムを使用しますが、この場合はカスタム グリッド システムにする必要があります。

誰かがヒントを与えることができれば、それは大歓迎です。

ここにHTMLがあります。

<body> 
<div class='container'>
     <div role='header'>
         <div class='row common-navigation'>
             <div class='wide' id='globalnav'></div>
         </div>
     </div>
     <div class='content' role='content'>
         <div class='section100'>
             <div class='component'>
                 <p>100% column</p>
             </div>
         </div>
         <div class='section75'>
             <div class='component'>
                 <p>75% column</p>
             </div>
         </div>
         <div class='section25'>
             <div class='component'>
                 <p>25% column</p>
             </div>
         </div>
     </div>
</div>
</body>

これがフィドルです

4

6 に答える 6

1

クラス .section75 と .section25 は両方とも、各 div の幅に合計 10px のマージンを追加しています。したがって、幅から同じ量を減らす必要があります。または、以下のようにマージンを使用する代わりにパディングを適用できます。

.section100,.section75,.section25 {float: left; padding: 0 5px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.section100 {
background: none repeat scroll 0 0 red;
width: 100%;
}

.section75 {
background: none repeat scroll 0 0 green;
width: 75%;
}

.section25 {
background: none repeat scroll 0 0 blue;
width: 25%;
}

ここにjsfiddleがあります

于 2013-06-14T11:44:36.237 に答える
1

マージンを o,5 px ではなく 0,5% に置き換えます

于 2013-06-14T11:23:34.670 に答える
0

マージンを使用しているためです。マージンはボックスの外側にあり、パディングは内側にあります。(余白は幅に追加されます)

削除する

margin

コンテナから

http://jsfiddle.net/ercrL/4/

于 2013-06-14T11:23:09.513 に答える
0

説明

コードにマージンを残しました。CSS

マージンはDOM 要素のサイズに影響します: W3Schools ソース

解決

( JSFiddle.section25 )との右マージンを置き換えます.section75

CSS

.section75 {
  background: none repeat scroll 0 0 green;
  float: left;
  margin: 0 auto;
  width: 75%; }

.section25 {
  background: none repeat scroll 0 0 blue;
  float: left;
  margin: 0 auto;
  width: 25%; }
于 2013-06-14T11:24:48.863 に答える