Question

我想在它的图像旁边描述猫。你能救我吗？

<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

你有一些基本的格式和浮动问题，但我为你修好了！希望这是你想要的。

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

Answer 2

试试这个：

CSS：

#parent_div_1
{
    margin-right:10px;
}

#parent_div_1 img, #parent_div_1 div
{
    display:inline-block;
    vertical-align:middle;
}
#parent_div_1 div
{
    margin-right:5px;
    border:1px solid red;
}

和HTML：

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

https://jsfiddle.net/c6242/4615/

div图像旁边的Div

2 个答案: