0

我在移动设备上显示 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;
}
4

3 回答 3

0

这应该工作:)：

  #zdjecie_podobne {     
    width: 120px;
    float: left;
    display:inline-block;
    }
    #tekst_podobne {
    width: 75%;
    float: left;
    font-size: 16px;
    display:inline-block;
    }
于 2013-11-14T17:33:18.193 回答
0

add display:inline-block to #zdjecie_podobne and #tekst_podobne

于 2013-11-14T17:19:17.047 回答
0

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%; }
于 2013-11-14T17:23:46.030 回答