为什么我的图库图片不在一行显示?

问题描述 投票:0回答:1

我目前正在学习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 css image-gallery
1个回答
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好运;)


0
投票

这里有一个针对你的页面的修复和解决方案,图库也可以在移动视图中使用,每张图片的大小都是响应的。

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>
© www.soinside.com 2019 - 2024. All rights reserved.