Question

好的，所以我正在开发我的第一个响应式网站，它将是流畅的，并且可以通过视口调整大小。我的页面看起来我想要更大的分辨率： http://i28.photobucket.com/albums/c250/WorldBalloonConvention/web/ScreenShot2014-08-28at41624PM_zps9c2e2e11.png

并且它基本上都在div的内部，图像对齐并通过文本放置在不同的位置。我想这样做是因为使用div元素创建两列意味着当我将页面调整为移动大小时，图片变得很小并且保留在其他文本旁边的列中，而不是仅仅强制在文本下面并保持其大小更大。该页面看起来很擅长当前使用此设置的移动设备分辨率。

所以这两个看起来都是我想要的，但是我的iPad断点会导致图像相互碰撞，并且用于将它们分开的填充物迫使中心图像向左移动，因为它碰到顶部图像填充，如图所示在这张图片中： http://i28.photobucket.com/albums/c250/WorldBalloonConvention/web/ScreenShot2014-08-28at41656PM_zps63322273.png

有没有更好的方法来分隔图像以查看我想要的但是当视口调整大小时，它们不会导致它们相互碰撞？目前这是图像填充：

.padimg {
padding-left:1%;
padding-top:4%;
padding-bottom:1%;
}

感谢您的时间，我习惯于只需要为桌面创建一个好的视口，所以我不得不重新学习如何为响应式布局创建。

Answer 1

如果您没有提供任何代码，这很难实现，但这是实现您所要求的（Fiddle demo）的可靠方法：

<强> HTML：

<div>
<div style="float:right;">
    <ul style="display:block;">
        <li>one one one</li>
        <li>two two two</li>
        <li>three three</li>
    </ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<强> CSS：

li {
    list-style-type: none;
    width:100px;
    border: 1px solid red;
    margin: 10px;
}

的 ** **编辑

我已更新演示，以展示如何使用上述代码偶尔分散浮动元素：updated demo

使用填充来分隔<div> </div>中的图像

1 个答案: