图像和分隔符css定位

Question

我的天气webapp存在问题。

正如您在下面的屏幕截图中看到的，如果设备的宽度较低，则预测会正确显示，但如果您在桌面或ipad上浏览页面，则图片不会留在左侧

高宽屏幕

小宽度屏幕

这是一天的代码：

echo '<div class="line-separator"></div>';
echo '<img class="small_img_meteo" src="images/' .$img1 . '.png"/>';
echo '<p>'.$name1.'<br />' .$condizione_txt1. '</p>';
echo '&nbsp'; 

这是样式表

.small_img_meteo{
position:relative;
float:left;
width:20%;
}

.line-separator{

height:1px;

background:#FFFFFF;

border-bottom:1px solid #717171;

}

不幸的是，我不能使用vw size 作为字体

那么，有没有办法将行分隔符放在图像的末尾（因为它们实际上覆盖了图像，而它们只关心文本的结尾），或者将图像固定到图像的末尾。左

Answer 1

问题是你的图片漂浮了。 将clear: both;添加到.line-separator。

Answer 2

快速解决方案：

.line-separator {
    clear: both;
    height:1px;
    background:#FFFFFF;
    border-bottom:1px solid #717171;
}

问题是所有图像都有浮动。这会导致文本设置高度。通过清除浮动，这个问题就解决了。