我目前正在学习css。我希望创建一个由3张图片组成的图库,并在上面的一个短段落下排成一行。然而,我无法将图片排在一行,也无法缩放它们。
这是html。
<!DOCTYPE html>
<html>
<head>
<title> Wardrobe Inspiration </title>
<link rel="stylesheet" href="wardrobe.css">
</head>
<body style="background-color: gainsboro;">
<div>
<h1>Welcome to my gallery of ideas for your wardrobe</h1>
<p1> Get inspired and unleash your inner Coco Chanel! </p1>
</div>
<div>
<h3>The benefits of a minimalist wardrobe...</h3>
<div>
<ul>
<li>Gives you additional space in your room</li>
<li>Makes it quicker and easier to choose clothes in the morning</li>
<li>Helps your style get simpler and more elegant</li>
</ul>
</div>
</div>
<div ID="stefets-picture" ID="stefets-picture:hover" class="gallery-item">
<img src= "minimal1.jpeg">
</div>
<div ID="stefets-picture" ID="stefets-picture:hover" class="gallery-item">
<img src= "minimal2.jpeg">
</div>
<div ID="stefets-picture" ID="stefets-picture:hover"class="gallery-item" >
<img src= "minimal3.jpeg">
</div>
<footer>
<div class="checkout">
<p>Feel free to check out my</p>
<a href = "https://www.pinterest.fr/esploratempo/boards/" target="_blank" > Pinterest </a>
</div>
</footer>
</body>
</html>
这是相关的css
.gallery-item {
width: 25%;
padding: 5px;
border: 1px solid gray;
float: left;
margin-right: 10px;
}
.checkout{
text-align: center
}
p {
display: inline-block;
}
a {
float: center;
}
#stefets-picture {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
#stefets-picture:hover {
filter: none;
-webkit-filter: grayscale(0);
}
我的图库到底哪里出了问题?任何帮助都是非常非常感激的。
我已经添加了一些东西,它为我工作。
这是HTML
<!DOCTYPE html>
<html>
<head>
<title> Wardrobe Inspiration </title>
<link rel="stylesheet" href="wardrobe.css">
</head>
<body style="background-color: gainsboro;">
<div>
<h1>Welcome to my gallery of ideas for your wardrobe</h1>
<p1> Get inspired and unleash your inner Coco Chanel! </p1>
</div>
<div>
<h3>The benefits of a minimalist wardrobe...</h3>
<div>
<ul>
<li>Gives you additional space in your room</li>
<li>Makes it quicker and easier to choose clothes in the morning</li>
<li>Helps your style get simpler and more elegant</li>
</ul>
</div>
</div>
<div id="container" class="container">
<div ID="stefets-picture" ID="stefets-picture:hover" class="gallery-item">
<img src= "minimal1.jpeg" class="photo-class">
</div>
<div ID="stefets-picture" ID="stefets-picture:hover" class="gallery-item">
<img src= "minimal2.jpeg" class="photo-class">
</div>
<div ID="stefets-picture" ID="stefets-picture:hover"class="gallery-item">
<img src= "minimal3.jpeg" class="photo-class">
</div>
</div>
<footer>
<div class="checkout">
<p>Feel free to check out my</p>
<a href = "https://www.pinterest.fr/esploratempo/boards/" target="_blank" > Pinterest </a>
</div>
</footer>
</body>
</html>
这就是CSS
.gallery-item {
width: auto;
padding: 5px;
border: 1px solid gray;
float: left;
margin-right: 10px;
}
.checkout{
text-align: center
}
p {
display: inline-block;
}
a {
float: center;
}
#stefets-picture {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
#stefets-picture:hover {
filter: none;
-webkit-filter: grayscale(0);
}
.container::after {
content: "";
clear: both;
display: table;
}
.photo-class {
height: 200px;
width: auto;
}
这一行。
.photo-class {
height: 200px;
width: auto;
}
给你控制照片的高度。所有的照片都可以是不同的大小,但它会将它们缩放到200px的高度,在这种情况下。
此外,我还添加了 "容器",这将使事情井井有条,在显示照片后,容器类用::后将清除浮动并将页脚放在下面。希望我说的有道理。祝你学习HTML和CSS好运;)
这里有一个针对你的页面的修复和解决方案,图库也可以在移动视图中使用,每张图片的大小都是响应的。
body {
background-color: gainsboro;
}
.gallery-items {
display: flex;
}
.gallery-item {
width: 33.33%;
}
img {
width: 100%;
}
.checkout {}
p {
text-align: center;
}
.stefets-picture {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.stefets-picture:hover {
filter: none;
-webkit-filter: grayscale(0);
}
<div>
<h1>Welcome to my gallery of ideas for your wardrobe</h1>
<p1> Get inspired and unleash your inner Coco Chanel! </p1>
</div>
<div>
<h3>The benefits of a minimalist wardrobe...</h3>
<div>
<ul>
<li>Gives you additional space in your room</li>
<li>Makes it quicker and easier to choose clothes in the morning</li>
<li>Helps your style get simpler and more elegant</li>
</ul>
</div>
</div>
<div class="gallery-items">
<div class="stefets-picture gallery-item">
<img src="https://picsum.photos/200/300?random=1">
</div>
<div class="stefets-picture gallery-item">
<img src="https://picsum.photos/200/300?random=1">
</div>
<div class="stefets-picture gallery-item">
<img src="https://picsum.photos/200/300?random=1">
</div>
</div>
<footer>
<div class="checkout">
<p>
Feel free to check out my
</p>
<p>
<a href="https://www.pinterest.fr/esploratempo/boards/" target="_blank"> Pinterest </a>
</p>
</div>
</footer>