Html 使用填充分隔a<；内的图像；部门>；

好的，所以我正在开发我的第一个响应性网站，它将是流动的，并随视口调整大小。我在页面上看到了我希望更大分辨率的效果：

它基本上都在一个div中，图像向右对齐，并通过文本放置在不同的位置。我之所以想这样做，是因为用div元素创建两列意味着当我将页面大小调整到手机大小时，图片会变得很小，并停留在其他文本旁边的一列中，而不是被强制放在文本下面，并保持其大小更大。该页面在当前使用此设置的移动分辨率方面看起来不错

因此，这两个都是我想要的，但是我的iPad断点会导致图像相互碰撞，用于分隔图像的填充物会迫使中间图像在碰撞顶部图像时向左移动，如下图所示：

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

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

---

感谢您的时间，我习惯于只需要为桌面创建一个好的视口，因此我必须重新学习如何创建响应性布局。

如果您不提供任何代码，这很困难，但这里有一个可靠的方法来完成您的请求（）：

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>

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

**编辑**

---

我已经更新了演示，展示了如何使用上面的代码零星地分散浮动元素：

我每天在响应性设计实现中使用回答中描述的格式。但是我在我的产品代码中没有使用内联CSS。您没有响应，提供的答案是否有助于您解决问题？使用下面我描述的解决方案，无论您在外部div上放置的宽度是多少百分比，图像格式都不会像您的示例中那样中断。是的，很抱歉，对于我需要的内容，它工作得足够好，并修复了主要问题，即使它不允许它们在整个文本中的不同位置堆叠。您好@srafik，根据您的评论，我更新了小提琴，以反映在不同位置堆叠的请求，我以前没有将其作为一项要求：虽然这并不是我想要的（将所有三个图像放在同一个div中意味着所有三个堆栈彼此重叠，而不是在缩小视口时在整个文本的不同位置堆叠）然而，对于这个特殊的例子来说，这是最有效的解决方案，因为它确实实现了其他所有功能，我可以处理所有三个图像，它们在调整大小时都位于文本上方，而不是堆叠在不同的位置（我以另一种方式实现了这一点，但一直遇到填充问题）