Question

我在移动设备上替换内联div有问题。所以代码在PC上工作得很好，但是当我在移动设备上访问我的网站时，我就不会以正确的方式显示div。

图像div位于带文本的div之上（应该是内联的）。这不是宽度的情况，因为即使我将图像的宽度更改为仅5px，这个小图像仍然不在旁边。

示例：http://www.filmypodobnedo.pl/matrix/

整个事情是关于将类似电影列入所选择的电影（在示例矩阵中），列出的电影（IMAGE + TEXT应该内联显示，适用于PC但不适用于移动设备）。

HTML：

<div class="podobny_film">
<div id="zdjecie_podobne">
<img class="featured-project-image" width="100" height="150" alt="Filmy podobne do Equilibrium" src="http://www.filmypodobnedo.pl/photos/Equilibrium.jpg">
</div>
<div id="tekst_podobne">
</div>

CSS：

.podobny_film {
float: left;
width: 80%;
color: #555555;
border-style: dashed;
border-width: 1px;
border-color: black;
padding: 10px;
}
#zdjecie_podobne {     
width: 120px;
float: left;
}
#tekst_podobne {
width: 75%;
float: left;
font-size: 16px;
}

Answer 1

将display:inline-block添加到#zdjecie_podobne和#tekst_podobne

Answer 2

div“podobny_film”包含具有固定像素宽度的div“zdjecie_podobne”和具有百分比宽度的div“tekst_podobne”。尝试使用div“zdjecie_podobne”的百分比宽度以及图像，然后它不应该中断。

#zdjecie_podobne {     
width:24%; /*together with tekst_podobne that's 99% so be aware of any margins or paddings that might sum up > 100%!*/
float: left;
}

.featured-project-image { width:100%; }

Answer 3

这应该有效:)：

  #zdjecie_podobne {     
    width: 120px;
    float: left;
    display:inline-block;
    }
    #tekst_podobne {
    width: 75%;
    float: left;
    font-size: 16px;
    display:inline-block;
    }

将元素定位在一行中

3 个答案: