如何设置4个div并排显示
需求分析
在网站制作过程中，有时需要将多个div水平并排显示，以达到更好的显示效果。比如，我们可能需要将4个图片或者4个模块放在同一行并排显示。那么，怎么样才能实现这个效果呢？
CSS float属性
在实现div并排显示的过程中，我们需要用到CSS的float属性。float属性是CSS中的一个布局属性，可以让元素浮动到指定位置，并且可以与其他元素叠加显示。在实现并排显示时，我们可以将每一个div设置为float:left，这样每个div都会靠左边显示，并且会自动排列。
div {
float: left;
}
上面的代码可以让所有的div元素靠左边浮动。
设置宽度和高度
在浮动元素时，宽度和高度的设置也很重要。如果不设置宽度和高度，会导致元素自动撑满整个父元素的宽度，如果有多个浮动元素，就会发生换行的情况。因此，在实现并排显示时，我们需要给每个元素设置一个固定的宽度和高度，以避免换行。
div {
float: left;
width: 25%;
height: 100px;
}
上面的代码中，我们设置了每个div的宽度为25%，高度为100px，这样就可以将4个div并排显示在同一行。
加上margin和padding
在浮动元素时，还需要注意加上margin和padding。由于浮动元素独立于文档流，如果不加上margin和padding，就可能导致元素之间没有间隔，或者元素与边框之间没有间隔。
div {
float: left;
width: 25%;
height: 100px;
margin: 5px;
padding: 10px;
}
上面的代码中，我们设置了每个div的margin为5px，padding为10px，这样就可以让每个div之间有一定的距离，同时也可以让内容与边框之间有一定的距离，从而达到更好的显示效果。
示例代码
接下来，我们来看一个完整的示例代码，实现4个div并排显示的效果。
.container {
width: 100%;
overflow: hidden;
}
.box {
float: left;
width: 25%;
height: 100px;
margin: 5px;
padding: 10px;
box-sizing: border-box;
}
.box:nth-of-type(1) {
background-color: #f00;
}
.box:nth-of-type(2) {
background-color: #0f0;
}
.box:nth-of-type(3) {
background-color: #00f;
}
.box:nth-of-type(4) {
background-color: #ff0;
}
上面的代码中，我们首先定义了一个容器container，设置了宽度为100%和overflow:hidden，这样可以让所有浮动元素在容器内显示，并且不会溢出容器。
然后定义了每个box元素，设置了float:left，宽度为25%，高度为100px，margin为5px，padding为10px，并且设置了box-sizing:border-box，这样可以让边框和内边距包含在宽度和高度的计算中。
最后，我们通过:nth-of-type伪类选择器，给每个box元素设置了不同的背景颜色。
总结
在网站制作中，div并排显示是一个常见的需求，通过上面的方法，可以很轻松地实现。需要注意的是，浮动元素时需要加上宽度、高度、margin和padding等属性，这样才能实现好的显示效果。同时，在实际使用中，还需要考虑兼容性和代码的清晰度，避免出现不必要的错误或者代码冗余。