Question

我的好友在学校项目的网站上遇到了问题。他想做一个小画廊。

前5张图片有意为：但他们就这样出现了：我们测试了各种各样的东西一小时。我们尝试将最底层的3个放在另一个div块中class="bilder"，但它是相同的。我们还尝试以不同的顺序放置图片，看看它是否与图片本身有关，但也有相同的结果。

div.wrapper {
    font-family: Calibri;
    width: 100%;
    float: left;
    color: white;
}

h1 {
    color: #F99F00;
    text-align: center;
}

body {
    background-color: black;
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}

li {
    float: left;
    font-family: fantasy;
    font-size: 120%
}

li a {
    color: white;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: green;
}

.active {
    backround-color: green;
}

li.selected  a {
    color: green;
    display: block;
}


#tct  {
    
    top: 15%;
    left: 5%;
    padding: 1%;
    color: #F99F00;
    font-size: 200%;
}



div.bilder img {
    padding: 1%;
    width: 18%;    
    float: left;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Counter-Strike: Global Offensive</title>
    <link href="../css/waffenliste.css" rel="stylesheet" type="text/css">
    <link href="pictures/csgotab.png" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div class="wrapper">
        <div>
            <h1>Counter-Strike: Global Offensive<h1>
        </div>
        <div>
            <ul>
                <li><a href="../index.html">Home</a></li>
                <li class="selected"><a href="waffenliste.html">Waffenliste</a></li>
                <li><a href="spray.html">Spray Patterns</a></a></li>
                <li><a href="ueber.html">Über</a></a></li>
                <li><a href="impressum.html">Impressum</a></li>
            </ul>
        </div>
        <div id="tct">
            <p>Kaufbar f&uuml;r: T und CT</p>
        </div>
        <div id="t">
            <p>Kaufbar f&uuml;r: Terroristen</p>
        </div>
        <div id="ct">
            <p>Kaufbar f&uuml;r: Antiterroreinheit</p>
        </div>
        <div class="bilder">
        <img id="awp" src="pictures/awp.PNG">
        <img id="scout" src="pictures/scout.PNG">
        <img id="dual" src="pictures/dual.PNG">
        <img id="p250" src="pictures/p250.PNG">
        <img id="deagle" src="pictures/deagle.PNG">
        <img id="nova" src="pictures/nova.PNG">
        <img id="negev" src="pictures/negev.PNG">
        <img id="m249" src="pictures/M249.PNG">
        </div>
        
</div>
            
</body>
</html>

Answer 1

您可以尝试使用以下html和css结构，

＆＃13;

section #imageGallery li {
	display: inline-block;
	margin: 20px;
	list-style: none;
}

section #imageGallery li div {
	width: 280px;
	height: 290px;
	color: black;
}



 #imageGallery .one {
	background-image: url(/Images1.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-color:#f9f8f5;
}
#imageGallery .two {
	background-image: url(/Images2.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-color:#f9f8f5;
}
#imageGallery .three {
	background-image: url(/Images3.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-color:#f9f8f5;
}
#imageGallery .four {
	background-image: url(/Images4.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-color:#f9f8f5;
}
#imageGallery .five {
background-image: url(/Images5.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-color:#f9f8f5;
}

＆＃13;

<section>
            <ul id="imageGallery">
                
                <li>
                        <div class="Image one">
                          
                        </div>
                </li>
               <li>
                        <div class="Image two">
                          
                        </div>
                </li>
               <li>
                        <div class="Image three">
                          
                        </div>
                </li>
               <li>
                        <div class="Image four">
                          
                        </div>
                </li>
                <li>
                        <div class="Image five">
                          
                        </div>
                </li>
            </ul>
        </section>

＆＃13;

希望它有所帮助。

Answer 2

这是因为你浮动所有图像。你应该使用浮动来显示行中的图像。显示inline-block就足够了。

如果您希望在行结束后坚持使用clearfix。

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Answer 3

只需使用以下css：

div.bilder {
    font-size: 0px;
}
div.bilder img {
    padding: 1%;
    width: 18%;    
    display: inline-block;
    vertical-align: top;
}

图片表现得非常奇怪

3 个答案: