使用填充分隔 <div> 内的图像

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