将元素添加到页面而无需手动重新定位先前的元素

Question

我们假设您决定在HTML文件中添加新元素。你编辑所有其他元素的位置吗？有更好的方法吗？

例如，我有一个带有几个div元素和列表的布局。我花了一些时间在页面上看起来很漂亮。然后我决定添加另一个div元素，突然间一切都没有了。

Answer 1

你的问题似乎非常开放，但我只是想给我两分钱。

输入：FLEXBOX

一个可用于响应式设计的工具（响应式，意味着您的页面布局会根据查看它的屏幕自动调整），这将是Flexbox的CSS属性。

我编辑了这个简单的例子来展示这一点。这个例子只是为父元素使用几行css代码，但是根据屏幕大小调整子（box）元素的大小并自动重新定位 ，而不需要任何其他样式：

display: flex;
flex-flow: row wrap;
justify-content: space-around;

在此处查看：simple flexbox sample

**一旦你在那个小提琴上，调整你的浏览器大小（或者放大和缩小），看看这些盒子如何自动重新定位就像魔法一样！

感兴趣？以下是帮助您入门的内容：Guide to Flexbox

希望这有帮助！

Answer 2

您需要调整布局中新添加的每个元素的定位和css。事情就是非常罕见的。但是如果你使用像bootstrap这样的响应式CSS，工作量就会减少。