Question

我正在尝试floating design，但是当我调整浏览器大小时，<p>标记旁边的<img>标记会开始在列中进行布局，而不是在图片。你可以在这里看到代码 - ＆gt; http://funkz.nfshost.com/ 它位于“** main-bottom-post**" ID . 我也在搜索网络，但大多数文章都是相反的 - 在img旁边创建一个列。提前致谢， M. K.

Answer 1

在您调整浏览器大小时，请在css：display:inline-block中尝试此操作

Answer 2

当您希望<p class="post-text">移动到您的图片下并在其上应用float: left;时，您必须使用media queries来定位特定的分辨率。

例如：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    p.post-text {
        float: left;
    }
}

这将使您的<p class="post-text">浮动图像，网页宽度介于 480px 和 320px 之间。

您可能还想查看this以获取更多参考资料。

Answer 3

尝试提供position属性。

或尝试使用media queries

@media screen and (min-width: xxpx) {
   div {width: xxpx;}
 }

试试这个链接

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://www.danstorm.com/dan-storm-article-css-15.html

关于图像包装的建议？

3 个答案: