Html 如何在漂亮的小行中定位div

我想以以下方式定位8个部门：

这是我的JSFIDLE，它有所有的

div

代码：

我想做的是使

div

的行为与此网站上的图标相同”。看看当你调整页面大小时，图标是如何缩小的，而不是不变的

谢谢您的帮助。我只想使用'div'来执行此操作，而不想使用表或任何类似的旧技术。

试试这个，我可以更改您的代码

.main {
    background-color: green;
    display:inline-block;
}

.row {
    background-color: blue;
    padding:5px;
}

.icon {
    width: 200px;
    height: 150px;
    background-color: orange;
    border: 1px solid black;
    display:inline-block;
}

---

强烈建议您使用一个框架来实现这一点，就像参考网站使用的一样

但一般来说，它可以通过css和

@媒体（最小宽度：768px）{}

在调整浏览器视点/窗口的大小时应用不同的css样式

---

有几个，但根据您的具体需要，它们使用bootstrap.js

您应该设置

float:left

如下：

---

如果您想将div大小减小到

198px

，请记住将div大小减小到

800px

（您有

2px

边框）。

您需要添加以下CSS：

* { box-sizing: border-box; } //border will not add to element width

.icon {
    width: 25%;
    height: 150px;
    background-color: orange;
    border: 1px solid black;
    float: left; //objects will sit next to eachother
}

---

此外，您还可以使用宽度/高度的%值来设置这一切，这样您就可以获得响应性的大小调整效果

在回答第一个问题“如何制作div”时，使用图标上的

float:left

，使其水平适合。 使用相对宽度使它们收缩。要使它们收缩并完全对齐，您需要使用媒体查询，我现在不讨论这个问题。这是更新的css

.main {
    height: 400px;
    width: 100%;/*relative widths*/
    background-color: green;
}

.row {
    width: 100%;/*relative widths*/
    background-color: blue;
}

.icon {
    width: 20%;/*relative widths*/
    height: 120px;
    background-color: orange;
    border: 1px solid black;
    float:left;/*fit horizontally*/
}
.row{
    clear:both;/*To stop the icons from floating*/
}

---

jsiddle:

您发布的示例网站使用断点将图标大小设置为特定值，具体值取决于用户视口的大小

阅读媒体查询，您应该能够非常轻松地复制这一点

您还可以将图标的大小设置为一个百分比值，而不是固定的宽度或高度，这将动态缩放，但不会非常优雅地重新流动

另外需要研究的是flexbox，因为它可以很好地调整以适应可用空间，但并非所有浏览器都100%支持

---

希望这对你有所帮助我想这正是你需要的

.row div{
    float:left;
}

只是浮在水面上

---

如果您不需要行与行之间的间隙，那么对css进行一些简单的调整即可：

.main {
    display:table;
    border-spacing:50px;
}

.row {
    display:table-row;
}

.icon {
    display:table-cell;
}

否则，您只需添加额外的关闭和打开主div即可获得中间间隙：

---

使用

float:left；

浮动项目，并使用基于百分比的宽度来缩放布局

移除容器元素的高度，使其能够展开并适合其内容

例如：

您引用的站点使用媒体查询根据窗口宽度调整样式。这也可以，但百分比可能是实现所需结果的更简单方法

---

更新：使用基于百分比的填充和

位置：绝对的巧妙小技巧，您可以使网格项保持高宽比。请参见上面的小提琴链接。
不要告诉我这是Mark Cuban的应用程序网站？或者设置
框大小：边框框；
并保持200px的宽度。但是，当重新设置时调整页面大小时，只有橙色
div
的宽度缩小，高度没有缩小。在我展示的示例站点上，它们都缩小了，并保持了它们的高宽比。你能编辑它吗？我试图理解为什么
。row
类有
溢出：隐藏；
以及为什么它是这样工作的。删除该行只会使s蓝色和绿色框缩小，但图标保持不变。这是怎么回事？当项目浮动时，它们的容器会获取其非浮动内容的高度，而忽略其浮动内容的高度。出于某种原因，
overflow:hidden
会使其获取浮动的高度，即背景和其他样式ng将正确显示。在怪癖模式下。但是当页面重新调整大小时，让黄色框缩小大小如何？为此，您需要将表格的宽度设置为100%，然后从其他位删除所有宽度和高度，留下一个宽度设置为100%的方形图像：老实说，这取决于规格f一般来说，我会使用bootstrap，因为我工作的大多数web项目都是“移动优先”“在应用程序中，它被其他人广泛使用，并且很容易通过composer进行维护。查看前端web框架的功能，以确定哪个最适合您正在进行的项目，以及您觉得最适合的内容。
.main {
    display:table;
    border-spacing:50px;
}

.row {
    display:table-row;
}

.icon {
    display:table-cell;
}