如何使用CSS绝对定位将图片排成2行3列且保持新闻区块位置不变

修改说明 #

• 完全保留原有#news和#museumimages的绝对定位规则，确保新闻区块位置没有任何变动
• 为图片容器设置固定宽度，刚好容纳3个图片单元
• 通过浮动属性实现图片单元自动排列，每行放3个，超出自动换行，最终形成2行的布局
• 调整说明文字的默认样式，优化显示效果
• 全程未使用grid等复杂布局，符合要求

完整修改后的CSS代码 #

body {
    margin: 0;
    padding: 0;
    font-family: Times, "Times New Roman", Georgia, serif;
    font-size: 14px;
    color: #333333;
    width: 1024px
}

.navigation {
    background-color: #333333;
    color: #fefefe;
    width: 1024px;
    font-size: 120%;
    border-bottom: 3px solid #ff0000; 
}

img {
    width:200px;
    height:100px; 
}

#news {
    position: absolute; right: 25px; top: 220px;
    text-align: left;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#museumimages {
    position: absolute; left: 24px; top: 200px;
    width: 660px; /* 刚好容纳3个200px宽度的图片+2个30px间距 */
}

/* 新增以下样式即可实现需求 */
#museumimages a {
    float: left;
    width: 200px;
    margin-right: 30px;
    margin-bottom: 20px;
    text-align: center;
    text-decoration: none;
    color: #333;
}

/* 每行第三个元素清除右边距，避免撑破容器 */
#museumimages a:nth-of-type(3n) {
    margin-right: 0;
}

/* 调整说明文字的默认边距 */
#museumimages a p {
    margin: 8px 0 0 0;
}

如果需要调整图片之间的间距，直接修改margin-right和margin-bottom的数值即可。

内容的提问来源于stack exchange，提问作者user17204797