html，div和浮動結構

Question

什麼是基於我附加的圖像在頁面上構造（html）的正確方法。我正在嘗試，但我不斷收到與第二部分的名稱溢出問題直接出現在文本部分，而不是在照片的頂部。我建立了我的結構是這樣的：

<div style="width:100%; padding-bottom:30px;"> 
<strong>Name1</strong> 
    <div style="float:left; padding-right:30px; width:20%"> 
      PHOTO 
    </div> 
    <div style="float:left; width:70%"> 
     TEXT SECTION 
    </div> 
</div> 

<div style="width:100%; padding-bottom:30px;"> 
<strong>Name2</strong> 
    <div style="float:left; padding-right:30px; width:20%"> 
      PHOTO 
    </div> 
    <div style="float:left; width:70%"> 
     TEXT SECTION 
    </div> 
</div> 

Answer 1

將您<strong>的<div> -s外，並應用到overflow: hidden小號<div>

.panel { width:100%; padding-bottom:30px; overflow: hidden } 
 

 
.photo { float:left; padding-right:30px; width:20%; height: 80px; border: 3px solid #000 } 
 
.text { float:right; width:70%; height: 80px; border: 3px solid #000 }

<strong>Name1</strong> 
 
<div class="panel"> 
 
    <div class="photo"> 
 
     PHOTO 
 
    </div> 
 
    <div class="text"> 
 
     TEXT SECTION 
 
    </div> 
 
</div> 
 

 
<strong>Name1</strong> 
 
<div class="panel"> 
 
    <div class="photo"> 
 
     PHOTO 
 
    </div> 
 
    <div class="text"> 
 
     TEXT SECTION 
 
    </div> 
 
</div> 
 

 
<strong>Name1</strong> 
 
<div class="panel"> 
 
    <div class="photo"> 
 
     PHOTO 
 
    </div> 
 
    <div class="text"> 
 
     TEXT SECTION 
 
    </div> 
 
</div>

Answer 2

HTML

<div class="pick_group"> 
    <h2>Name 1</h2> 
    <img class="photo" /> 
    <p class="text"></p> 
</div> 

<div class="pick_group"> 
    <h2>Name 2</h2> 
    <img class="photo" /> 
    <p class="text"></p> 
</div> 

的CSS

地方這間之前的

.pick_group { 
width: 800px; 
margin: 0 auto; 
clear: both; 
} 

.pick_group h2{ 
style if you want 
} 

.photo { 
width: 200px; 
float: left; 
margin: 10px 25px; 
} 

.text { 
width: 500px; 
float: left; 
margin: 10px 25px; 
}