2015-11-08 100 views
2

JSfiddle Demo股利旁邊的div圖像

我想讓貓的描述旁邊的圖像。你可以幫我嗎?

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

回答

2

你有一些基本的格式和漂浮的問題,但我爲您解決!希望這是你想要的。

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

+0

非常感謝你:)我要讓他們並排一段距離我margin和padding嘗試過,但我不能成功,你可以幫助我這個? – dummy

+0

是的!現在就開始工作。 –

+0

固定,看到新的演示!你可以改變''.child_div_2''上的邊距來獲得你想要的距離。調整填充以獲取邊框和元素之間的距離。 –

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/

+0

謝謝:)我需要一些邊框間距,但它不起作用。 – dummy