要避免图标右侧的文字不在其下面

Question

我在下面遇到这个问题，当屏幕尺寸变小时，它旁边的文字向下移动到图标下方的新行：

我想知道我在css / html中错过了什么？

＆＃13;

＆＃13;

.event-details .event-info img {
  display: inline-block;
  float: left;
  margin-right: 10px;
}

＆＃13;

<div class="medium -12 small-12 large-12 columns">
  <img src="http://static.igpandi.org/igpi_website/static/img/icon-location.png">
  <p>Cyberview Living Lab - Level 4, Cyberview Sdn Bhd, Block 3750, Persiaran APEC, Cyber 8, 63000, Cyberjaya, Selangor</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将margin-left图片width提供给p元素。

p {
 margin-left: /*width of image + your padding for image etc*/
}

img {
  display: inline-block;
  float: left;
  margin-right: 10px;
 }
 p{
  margin-left: 40px; /*width of image*/
 }

<div class="medium-12 small-12 large-12 columns">
        <img src="http://static.igpandi.org/igpi_website/static/img/icon-location.png"> 
        <p>Cyberview Living Lab - Level 4, Cyberview Sdn Bhd, Block 3750, Persiaran APEC, Cyber 8, 63000, Cyberjaya, Selangor, Cyberview Living Lab - Level 4, Cyberview Sdn Bhd, Block 3750, Persiaran APEC, Cyber 8, 63000, Cyberjaya, Selangor</p>
</div>

Answer 2

在这种情况下，您应该使用margin-left <p>代替margin-right <img>小屏幕尺寸

Answer 3

将img和文本放入表中，然后这应该可以。

<div class="medium -12 small-12 large-12 columns">
    <table>
        <tr>
            <td>    
                 <img src="assets/img/location-ico.png"> 
            </td>
            <td>    
                 <p>Cyberview Living Lab - Level 4, Cyberview Sdn Bhd, Block 
                    3750, Persiaran APEC, Cyber 8, 63000,Cyberjaya,Selangor</p>
            </td>
        </tr>
    </table>
</div>