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> s

.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;
}