如何將這些文本元素顯示在圖像的右側？

我想以下幾點：如何將這些文本元素顯示在圖像的右側？

====== 
=img1= Text 
====== 

====== 
=img2= Some more Text 
======

當前HTML：

<div id="divison-id"> 
    <a href="[href]"><img src="images/img1.png"></a> 
    <p>Text</p> 
    <a href="[href]"><img src="images/img2.png"></a> 
    <p>Some more text</p> 
</div>

當我添加下面的CSS規則：

#division-id p { 
    display: in-line 
}

我得到這個：

======  ====== 
=img1= Text =img2= Some more Text 
======  ======

爲什麼會發生這種情況，解決這個問題的正確方法是什麼？

來源

2016-05-16 Robert

最簡單的方法是在第一次img文本後添加
，但這不是最好的方法。 – Frutis

如果你可以改變HTML一點，儘量包裝內的另一個<div>的<p>和<img />或者是這樣的：

#divison-id p { 
 
    display: inline; 
 
}

<div id="divison-id"> 
 
    <div> 
 
    <a href="[href]"><img src="images/img1.png"></a> 
 
    <p>Text</p> 
 
    </div> 
 
    <div> 
 
    <a href="[href]"><img src="images/img2.png"></a> 
 
    <p>Some more text</p> 
 
    </div> 
 
</div>

，並注意，有兩個誤區：

有沒有display: in-line。
選擇器是錯誤的。

來源

2016-05-16 05:00:06

#division-id p:after 
{ 
    content: ''; 
    display: block; 
    clear: both; 
}

來源

2016-05-16 05:00:31

試試這個：

Add <br> tag after each <p> tag. Like this: 


<div id="divison-id"> 
<a href="[href]"><img src="images/img1.png"</a> 
<p>Text goes right</p><br/> 
<a href="[href]"><img src="images/img2.png"</a> 
<p>Some more text</p><br/> 
</div>

CSS：

#divison-id p{ display:inline; vertical-align:top}

來源

2016-05-16 05:04:18

試試這個

我加<div class='item'>包裹每個圖像和文本

<div id="division-id"> 
    <div class='item'> 
     <a href="[href]"> 
      <img src="images/img1.png"> 
     </a> 
     <p>Text</p> 
    </div> 
    <div class='item'> 
     <a href="[href]"> 
      <img src="images/img2.png"> 
     </a> 
     <p>Some more text</p> 
    </div> 
</div> 

<style> 
    #division-id p { 
     display: inline 
    } 
</style>

希望它可以幫助

來源

2016-05-16 05:04:53 keziah

我更喜歡使用LIS替代的div和BRS，因爲你並不需要的款式額外的東西。

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
} 
 

 
ul li a { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-right: 10px; 
 
}

<ul id="division-id"> 
 
    <li> 
 
    <a href="[href]"><img src="images/img1.png"></a> 
 
    <p>Text</p> 
 
    </li> 
 
    <li> 
 
    <a href="[href]"><img src="images/img2.png"></a> 
 
    <p>Some more text</p> 
 
    </li> 
 
</ul>

來源

2016-05-16 05:37:20 Syren

你可以試試這個。我個人建議你不要使用float：left cuz它會限制你的樣式在高度和寬度方面。

<style type="text/css"> 
.division_id div, .division_id>div>p{ 
    display:inline-block; 
} 
.division_id>div>a{ 
    vertical-align:middle; 
} 
</style> 
<html> 
<div class="division_id"> 
    <div> 
     <a href="[href]"><img src="images/img1.png"></a> 
     <p>Text</p> 
    </div> 
    <div> 
     <a href="[href]"><img src="images/img2.png"></a> 
     <p>Some more text</p> 
    </div> 
</div> 
</html>

來源

2016-05-16 08:27:06 jelliaes

如何將這些文本元素顯示在圖像的右側？

回答

相關問題