方法一:使用flexbox布局
.container { display: flex; justify-content: space-between; align-items: center; } .container div { flex-basis: calc(33.33% - 10px); height: 100px; background-color: #ccc; margin-right: 10px; } .container div:last-child { margin-right: 0; }
方法二:使用grid布局
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .container div { height: 100px; background-color: #ccc; }
方法三:使用calc函数
.container { font-size: 0; } .container div { width: calc(33.33% - 10px); height: 100px; background-color: #ccc; display: inline-block; margin-right: 10px; font-size: 16px; /* 解决字体大小问题 */ } .container div:last-child { margin-right: 0; }
以上三种方法各有优缺点,需要根据实际情况选择使用。需要注意的是,在具体实现时,要考虑到浏览器兼容性和响应式布局,保证在各种分辨率和设备上都能正常展现。