2015-11-05 65 views
1

正如您從下面的代碼片段中看到的那樣,該文本出現在圖像下方。我如何製作它,使其看起來就在圖像旁邊?如何正確定位文字?

#pag{ 
 
    margin-top: 20vh; 
 
    margin-right: 60vw; 
 
    height: 30vh; 
 
    width: 45vh; 
 
} 
 

 
#pa{ 
 
    float: right; 
 
    margin-right: 8vw; 
 
    font-size: 60px; 
 
    font-family: Courier; 
 
    margin-bottom: 40vh; 
 
}
<img id="pag" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
 
<p id="pa">Google lorem ipsume lorem ipsumelorem ipsume</p>

+0

http://stackoverflow.com/questions/16568272/why-doesnt-the-height-of-a-container-element-increase-if-it -contains-floated-el/16568504#16568504? –

回答

2

一個你可以用浮動的解決方案。您可以將float:left;設置爲image,下一個元素將位於image之後。

#pag{ 
 
    margin-top: 20vh; 
 
    //margin-right: 60vw; 
 
    height: 30vh; 
 
    width: 45vh; 
 
    float:left; 
 
} 
 

 
#pa{ 
 
    margin-right: 8vw; 
 
    font-size: 60px; 
 
    font-family: Courier; 
 
    margin-bottom: 40vh; 
 
}
\t \t \t <img id="pag" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
 
       <p id="pa">Google lorem ipsume lorem ipsumelorem ipsume</p>

2

#pag{ 
 
    width: 20%; 
 
    vertical-align: top; 
 
} 
 

 
#pa{ 
 
    display: inline-block; 
 
    font-size: 60px; 
 
    font-family: Courier; 
 
    margin-bottom: 40vh; 
 
    margin-left: 15px; 
 
    width: 70%; 
 
    margin-top: 0px; 
 
}
<div> 
 
<img id="pag" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
 
<p id="pa">Google lorem ipsume lorem ipsumelorem ipsume</p> 
 
</div>

這裏是不使用浮動元素的另一種方式。

現在,margin-right: 60vw;正在有效地推動文本到下一行(這是很多保證金!)。

因爲<p>是塊級別的元素,所以它會一直顯示在它自己的行上,除非你不告訴它。要做到這一點,您可以使用display: inline-block;風格。

我還會將width屬性更改爲使用百分比,因此它的響應速度更快,並且縮放比例更好。

2

而不是有CSS只是你可以在這裏使用2列和1行的表。

的圖像必須保持在另一TD的第一TD和文本,這將避免烏爾CSS對準由圖像

的側文本有關示例

<table> 
    <tr> 
     <td> 
     <img id="pag" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
     </td> 
     <td> 
     <p id="pa">Google lorem ipsume lorem ipsumelorem ipsume</p> 
    </td> 
    </tr> 
    </table> 

保持表寬度= 100 %並使用這個給定的代碼。 文本將對齊到右側,圖像將在左側...