时间戳

首页 > 解决方案 > 为什么我的图像是水平的而不是垂直的？

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

问题描述

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

这仅仅是我的浏览器宽度和我制作图像的大小的产物吗？

水平对齐的图像

<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>

标签： html

解决方案

如果您想垂直显示它们，您可以<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" />

推荐阅读