0

画面全体を埋めたい 2 つのフローティング列を持つ Web サイトを設計しています。

#column_main{ 
      position:relative;
      background:#ffffff;
      float:left;
      width:70%;
      height:auto;
      min-height:550px;
}
#column_side{
     position:relative;
     background:#dbdada;
     float:left;
     width:30%;
     height:auto;
     min-height:550px;
}

#column_main に以下の行がある場合

 border-left:solid 1px #c0c1c4;

フロートがぐちゃぐちゃになって、もう並んでいません。

IE では、#column_main の幅を auto に設定することで問題を解決でき、ページの残りの部分を埋めました。これは Firefox では機能せず、パーセンテージを少し減らしてみましたが、#column_main とページの右端の間にギャップが残ります。左側に 1px の境界線を配置し、画面の残りの部分をフロートで埋める方法はありますか。

4

2 に答える 2

0

box-sizing: border-box;#column_mainに追加

このプロパティは基本的に、ボックスのサイズを境界線とその中のすべてに適用することを示しています。

このブログ投稿では、これと、この特定の問題を解決するためのその他のオプションについて説明しています。

于 2013-10-10T19:57:23.093 に答える
0

枠線が幅に含まれるのではなく幅に追加されるボックス モデルのため、フロートは機能しなくなりました。 width:70% と width: 30% を実行することで、既に幅の 100% を使い果たしています。

境界線を適用する予定がある場合は、ラッピングされたフローティング列の 1 つの内側の子要素に境界線を適用し、それらの親列をグリッド システムとしてのみ使用して、他のコンテンツを構造化することをお勧めします。

または、ブートストラップ グリッドを試してください

于 2013-10-10T19:46:45.017 に答える