网页布局问题-优快云博客

本文探讨了一个初学者在使用HTML和CSS进行网页布局时遇到的问题：三张图片未能居中显示且右侧存在多余空白。通过分析提供的代码片段，可以发现网页结构包括头部、主要内容区域及底部，并详细描述了内容区域内的图片布局问题。

不是学习Python的第一天，跟随教程做了如下网页，问题来了，为啥中央3个图片不是居中的，右侧有多余空白。

作业截图

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="header">
        <img src="images/blah.png">
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Site</a></li>
            <li><a href="#">Others</a></li>
        </ul>
    </div>

    <div class="main-content">
        <h2>The Beach</h2>
        <hr>
        <div class="photos">
            <img src="images/0001.jpg" width="150">
            <img src="images/0002.jpg" width="150">
            <img src="images/0003.jpg" width="150">
        </div>
        <p>
            Three competing store owners rented adjoining shops in a mall. Observers waited for mayhem to ensue. The retailer on the right put up huge signs saying, "Gigantic Sale!" and "Super Bargains!"
The store on the left raised bigger signs proclaiming, "Prices Slashed!" and "Fantastic Discounts!" The owner in the middle then prepared a large sign that simply stated, "ENTRANCE".
        </p>
    </div>
    <div class="footer">
        <p>&copy;lifecoding</p>
    </div>
</body>
</html>

Python实战计划学习作业1-1