CSSのサブディビジョンの配置

Question

私は今後のHTML試験を準備し、今はCSSを練習しています。サブディビジョンが私のメインディビジョンの中にとどまらないという問題が発生します。私が望むのは、3つのサブブロックが大きなブロック内のすべてのスペースを均等に埋めるようにすることです。あなたのいずれかがそれが大いに感謝されるのを助けることができるなら!! ここにコードがあります。

HTML：

<div id="blk1"> 
    <div id="sb1"> 
     <p id="htitle">Hotel 1</p> 
     <img id="hpic" src="hpic1.jpg"> 
    </div> 

    <div id="sb2"> 
     <p id="htitle">Hotel 2</p> 
     <img id="hpic" src="hpic2.jpg"> 
    </div> 

    <div id="sb3"> 
     <p id="htitle">Hotel 3</p> 
     <img id="hpic" src="hpic3.jpg"> 
    </div> 
    </div><!-- End of Blk1 --> 

CSS：あなたはCSSのコードを複製している

#blk1{ 
border: 1px solid blue; 
position:relative; 
} 

#sb1{ 
border: 1px solid black; 
float: left; 
position:relative; 
width:33%; 
} 

#sb2{ 
border: 1px solid black; 
float: left; 
width:33%; 
} 

#sb3{ 
border: 1px solid black; 
float: left; 
width:33%; 
} 

Answer 1

、私が代わりにクラスを使用することをお勧めします。その後widthのCalculが考慮して境界線を取るためにbox-sizing: border-box;プロパティを使用します。

.sb{ 
    border: 1px solid black; 
    float: left; 
    position:relative; 
    width:33.33%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
} 

次に、要素のidがユニークである必要があり、あなたはこのID #htitleに一つだけの時間を使用する必要がありますので、#hpicに同じ代わりにクラスを使用してください。なぜならフロートの

See this fiddle