html - 无法将图像显示为 HTML

问题描述

嘿，我正在尝试为我正在托管的服务器获取一个网站，并且我正在尝试将底部的两个图像带到它们上方的开放区域。

任何人都可以帮助我，我无法解决这个问题，我也是堆栈溢出的新手，所以我没有一些人那么快对不起，它也不会让我发布，因为有太多很多代码，所以我拿出了css。

所以这是代码的“JSFiddle”链接：

    <body>
        <div class="card1 one" style="margin-top: 40px;">
            <img src="css/images/10.png" width="480" height="270"/>
        </div>

        <div class="card1 two" style="margin-top: 60px;">
            <img src="css/images/4.png" width="480" height="270"/>
        </div>

        <div class="card2 one">
            <h2>
                Our Server.
            </h2>
            <p>
                
            </p>
            <p>
                
            </p>
        </div>

        <div class="card3 two">
            <h2>
                Our Staff Team.
            </h2>
            <h3>
                Owners:
            </h3>
            <dl>
                Inc0gnitoON
                IgnitionON
            </dl>
            <h3>
                Admins:
            </h3>
            <dl>
                N/A
            </dl>
            <h3>
                Moderators:
            </h3>
            <dl>
                WitherVoid_
            </dl>
        </div>
    </body>
    <body>
        <div class="card1 three" style="margin-bottom: 5px;">
            <img src="css/images/7.png" width="480" height="270"/>
        </div>

        <div class="card1 four">
            <img src="css/images/9.png" width="480" height="270"/>
        </div>

    </body>

标签： htmlcss

您应该将所有图像对齐到一个正方形中，这有利于更简洁和最少的代码：

CSS：

img { 
    width:20%; 
    display:inline-table; 
    margin:5px; 
}

我刚刚做了“img”，但你实际上可以把它变成一个类，例如“.card”

HTML：

<div> 
    <img src="https://via.placeholder.com/350x150" /> 
    <img src="https://via.placeholder.com/350x150" /> 
    <br>
    <img src="https://via.placeholder.com/350x150" /> 
    <img src="https://via.placeholder.com/350x150" /> 
</div>

输出：

如果我的帖子没有帮助或您不太了解，此链接也可以帮助您实现这一目标。

编辑：这应该对齐两个图像，可能需要弄乱 CSS 中的数字以使其更好地适应：

CSS：

.block { 
    width:20%; 
    display:inline-table; 
    margin:5px; 
} 
.side {  
    display:inline; 
    margin-left: 50%; 
    margin-top: -20%;
} 
.second { 
    display:inline; 
    margin-left: 50%; 
    margin-top: -1%;
}

HTML：

<div> 
    <img src="https://via.placeholder.com/350x150" class="block"/> 
    <img src="https://via.placeholder.com/350x150" class="block"/> 
    <br>
    <img src="https://via.placeholder.com/350x150" class="block"/> 
    <img src="https://via.placeholder.com/350x150" class="block"/> 
</div> 

<div>
    <img src="https://via.placeholder.com/150x300" class="side"/>
    <img src="https://via.placeholder.com/150x300" class="second"/>
</div>

html - 无法将图像显示为 HTML

问题描述

解决方案

推荐阅读