1

SO チャットのような div 内にボックスを浮かせていますが、ユーザーが独自のチャット ルームを作成できる自分の Web サイト用のボックスを作成しています。ページ上のこれらのボックスはチャットルームを表し、それらに最適な幅を作りたいので、余白に余分なスペースがなくても、ページにぴったり収まります。それらが配置されているメインの div は 965px で、その左右に 15px のパディングがあり、幅は 935px です。幅を 965px から 935px に減らして、合計幅を 965px に保ちます。

私のシナリオのアイデアを得るには、A Fiddleをチェックしてください

ご覧のとおり、divの右側の端にスペースが残っていますが、それは望ましくありません.チャットボックスをピクセルに完全に合わせて幅全体に合わせ、境界線も幅としてカウントされることを忘れないでください. 誰かが私を助けることができれば、それは素晴らしいことです!

CSS スタイル

body {
    width:1000px;
}

#Body {
    width:935px;
    padding:15px;
    height:500px;
    background-color:#F1F1F1;
    margin:0 auto;
}
.ChatRoom {
    float:left;
    width:223px;
    height:200px;
    border:1px solid #666;
    cursor:pointer;
    margin-right:8.75px;
    background-color:#FFF;
}
.ChatTitle {
    width:100%;
    height:30px;
    line-height:30px;
    font-size:13px;
    font-weight:bold;
    text-align:center;
    background-color:#C6D6D9;
    border-bottom:2px solid #9C0;
}
4

2 に答える 2

2

を使用してこれを実現できますbox-sizing:border-box。それが行うことは、幅に追加する通常の動作 (次の行へのオーバーフローを行う)とは対照的に、幅からpaddingとサイズを含めることです。を使用してスペースを提供するために使用されている間、境界線と白い背景を持つここに を追加しました。border<div>div.Inner.ChatRoompadding

jsフィドル

HTML

<div class="ChatRoom">
    <div class="Inner">
        <div class="ChatTitle">My Chat Room</div>
    </div>
</div>

CSS

.ChatRoom {
    float:left;
    width:25%;
    height:200px;
    padding:8px;
    box-sizing:border-box;
}
.ChatRoom .Inner {
    border:1px solid #666;
    box-sizing:border-box;
    background-color:#FFF;
    cursor:pointer;
    height:100%;
}

それなしborder-box

onborder-boxを利用して、それがなくてもかなり簡単であることがわかりました。margin.Inner

jsフィドル

.ChatRoom {
    float:left;
    width:25%;
    height:200px;
}
.ChatRoom .Inner {
    border:1px solid #666;
    margin:8px;
    background-color:#FFF;
    cursor:pointer;
    height:100%;
}
于 2013-03-29T02:40:31.547 に答える
1

http://jsfiddle.net/DyTT8/1/

最後の div は、15px のパディングに追加されない場合、マージンをリセットする必要があります。私はそれを与えてdivを225pxにすることでこれclass="lastを行いました。.ChatRoomこれにより、適切な間隔が得られます。

また、div を順不同のリストに入れ、最後の div を li:last-child でターゲットにして、そのようにマージンを削除することもできます。

于 2013-03-29T02:47:05.443 に答える