css - 图像和分隔符定位

Question

我的天气网络应用程序有问题。

正如您在下面的屏幕截图中看到的，如果设备的宽度较低，预测会正确显示，但如果您在台式机或 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 大小

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

Answer 1

问题是您的图像 float 。添加一个 clear: both; 到 .line-separator。