html - div 图像旁边的 div

Question

JSfiddle Demo

我想在它的图像旁边对猫进行描述。你能帮帮我吗？

<div id='parent_div_1'>
  <div class='child_div_1'>
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD" alt="null" />
  </div>
  <div class='child_div_2'>
    <pre>
       Name: Caroline
       Age:1;
       Gender: Female;
       Weight: 3kg;
    </pre>
  </div>
</div>

Answer 1

您遇到了一些基本的格式和 float 问题，但我已经为您解决了!希望这就是您想要的。

HTML:

<div id='parent_div_1'>
   <div class ='child_div_1'>
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD" alt="null" />
   </div>
   <div class ='child_div_2'>
      <p>Name: Caroline
         Age:1;
         Gender: Female;
         Weight: 3kg;</p>
   </div>
</div>

CSS:

 #parent_div_2, #parent_div_3{
    width:300px;
    height:200px;   
    margin-right:10px;
}
.child_div_1{
   float: left;
   border: 1px solid green;
}
.child_div_2{
   float: left;
   height: 50px;
   margin: 30px;
   padding: 30px;
   border: 1px solid red;
}

CODEPEN DEMO