Question

这是我的代码在浏览器窗口中的图像，显示的是水平而不是垂直放置的图像。

这仅仅是浏览器宽度和图像尺寸的乘积吗？

<div id="images">
  <h3>Here is some design work that I have done</h3>
  <img id="img1" src="photos/bees_wax_final_logo.jpg" width="200px" height="300px" alt="beeswax" />
  <img id="img2" src="photos/before-and-after.jpg" height="200px" width="200px" alt="beforeandafter" />
  <img id="img3" src="photos/Brush-work-buildings.jpg" alt="brushwork" height="200px" width="200px" />
  <img id="img4" src="photos/Cosmic-woman.jpg" alt="cosmic" height="200px" width="200px" />
  <img id="img5" src="photos/cosmo_elephant.jpg" alt="cosmo" height="200px" width="200px" />
  <img id="img6" src="photos/Dispersion_window.jpg" alt="dispersion" height="200px" width="200px" />
  <img id="img7" src="photos/Free_dogs_drawing.jpg" alt="freedogs" height:="200px" width="200px" />
  <img id="img8" src="photos/Graphic-vector-art-logo-copy.jpg" alt="vectorart" height="200px" width="200px" />
  <img id="img10" src="photos/I_am_coming_for_you.jpg" alt="shark" height="200px" width="200px" />
  <img id="img10" src="photos/keener_raw_honey_logo.jpg" alt="rawhoney" height="200px" width="200px" />
  <img id="img11" src="photos/Magazine_cover.jpg" alt="magazinecover" height="200px" width="200px" />
  <img id="img12" src="photos/moon_man_background.jpg" alt="moonman" height="200px" width="200px" />
  <img id="img13" src="photos/Nature_Double_Exposure.jpg" alt="nature" height="200px" width="200px" />
  <img id="img14" src="photos/purple_water.jpg" alt="purplewater" height="200px" width="200px" />
  <img id="img15" src="photos/Surrealism-style.jpg" alt="surrealism" height="200px" width="200px" />
  <img id="img16" src="photos/Surrealism.jpg" alt="surrealsim2" height="200px" width="200px" />
  <img id="img17" src="photos/the_greener_lawn.jpg" alt="greenlawn" height="200px" width="200px" />
  <img id="img18" src="photos/Window-correction.jpg" alt="windowcorrection" height="200px" width="200px" />
</div>

Answer 1

如果要垂直显示它们，可以在每个图像后放置一个<br>。然后，您可以将图像居中放置在CSS文件中，以使其看起来更整洁。还有其他方法可以做到这一点。这可能是最简单的方法之一。

<div id="images">
    <h3>Here is some design work that I have done</h3>
    <img id="img1" src="photos/bees_wax_final_logo.jpg" width="200px" height="300px" alt="beeswax" />
    <br>
    <img id="img2" src="photos/before-and-after.jpg" height="200px" width="200px" alt="beforeandafter" />
    <br>
    <img id="img3" src="photos/Brush-work-buildings.jpg" alt="brushwork" height="200px" width="200px" />

Answer 2

好的，最快的解决方案是在所有图像上设置display: block，以使用CSS消除图像周围的任何浮动。因此它们将垂直堆叠。

#images img{
    display: block;
}

<div id="images">
        <h3>Here is some design work that I have done</h3>
            <img id="img1" src="photos/bees_wax_final_logo.jpg" width="200px" height="300px" alt="beeswax"/>
            <img id="img2" src="photos/before-and-after.jpg" height="200px" width="200px" alt="beforeandafter"/>
            <img id="img3" src="photos/Brush-work-buildings.jpg" alt="brushwork" height="200px" width="200px"/>
            <img id="img4" src="photos/Cosmic-woman.jpg" alt="cosmic" height="200px" width="200px"/>
            <img id="img5" src="photos/cosmo_elephant.jpg" alt="cosmo" height="200px" width="200px"/>
            <img id="img6" src="photos/Dispersion_window.jpg" alt="dispersion" height="200px" width="200px"/>
            <img id="img7" src="photos/Free_dogs_drawing.jpg" alt="freedogs" height:="200px" width="200px"/>
            <img id="img8" src="photos/Graphic-vector-art-logo-copy.jpg" alt="vectorart" height="200px" width="200px"/>
            <img id="img10" src="photos/I_am_coming_for_you.jpg" alt="shark" height="200px" width="200px"/>
            <img id="img10" src="photos/keener_raw_honey_logo.jpg" alt="rawhoney" height="200px" width="200px"/>
            <img id="img11" src="photos/Magazine_cover.jpg" alt="magazinecover" height="200px" width="200px"/>
            <img id="img12" src="photos/moon_man_background.jpg" alt="moonman" height="200px" width="200px"/>
            <img id="img13" src="photos/Nature_Double_Exposure.jpg" alt="nature" height="200px" width="200px"/>
            <img id="img14" src="photos/purple_water.jpg" alt="purplewater" height="200px" width="200px"/>
            <img id="img15" src="photos/Surrealism-style.jpg" alt="surrealism" height="200px" width="200px"/>
            <img id="img16" src="photos/Surrealism.jpg" alt="surrealsim2" height="200px" width="200px"/>
            <img id="img17" src="photos/the_greener_lawn.jpg" alt="greenlawn" height="200px" width="200px"/>
            <img id="img18" src="photos/Window-correction.jpg" alt="windowcorrection" height="200px" width="200px"/>   
   </div>

为什么我的图像是水平的而不是垂直的？

2 个答案: