html - 将图像定位在图像上方(图像库)

Question

我想在底部放置 6 张图片，在它们上方放置一张大图片。我正在尝试制作图片库。

我已将 margin-top 设置为 6 个图像。我已经为预览图像添加了我想要更大的其他图像，但它似乎使其他图像向下移动并且有些图像超出了 div。我知道这可能与 float 的图像有关？我对把 float 放在哪里有点困惑我最初只是 float 图像但它似乎不需要它我猜是因为它们是内联的。我可能需要把它们放在 div 中？总的来说，我只是感到困惑:/

这是一张图片，可以清楚地说明我想要实现的目标:

这是我的代码:

HTML

<div class="mainInfo">
<div class="gallery">

         <!-----this is the first image I want to be the large preview--->
     <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>

     <a href="#"><img src="../assets/images/gallery/gallery1.png" alt=""></a>
     <a href="#"><img src="../assets/images/gallery/gallery2.png" alt=""></a>
     <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>
     <a href="#"><img src="../assets/images/gallery/gallery4.png" alt=""></a>
     <a href="#"><img src="../assets/images/gallery/gallery5.png" alt=""></a>
     <a href="#"><img src="../assets/images/gallery/gallery6.png" alt=""></a>
</div>
 <!--END OF MAIN INFO-->
 </div>

CSS

 .mainInfo {
height: 650px;
background-color:#FCFCFC;
color:#001D5D;
padding: 100px 0 0 30px;

/* .............Gallery section........... */
.gallery {
float: left;
}

 .gallery img {
width:140px;
height:auto;
margin:365px 0 0 15px;
 }

 .displayImage img {
width:400px;
height: auto;
margin: 0 auto;
padding:10px 0 0 30px;
 }


/* .............Gallery section END........... */

Answer 1

组织

---

1. 您需要组织 HTML 以进行布局。

   尝试在 <div class="displayImage"></div> 中插入您的大图像标签。然后您可以使用 CSS 更轻松地控制它。

2. 使用 CSS 定义约束。

   让我们尝试为您的图片添加适当的宽度并固定边距。

---

更新的 CSS

.gallery {
  float: left;
}

.gallery img {
  width:80px;
  height: 80px;
  margin: 10px;
}

.displayImage {
  text-align: center;
  padding-bottom: 20px;
}

.displayImage img {
  width: 400px;
  height: auto;
  margin: 0 auto;
}

更新的 HTML

<div class="gallery">
    <div class="displayImage">
      <a href="#"><img src="http://images.summitpost.org/original/371959.JPG" alt="" class="displayImage"></a>
    </div>

    <a href="#">
      <img src="http://www.slowtrav.com/blog/chiocciola/IMG_1368.jpg" alt="">
    </a>
    <a href="#">
      <img src="http://www.nyroute28.com/pics/Thurmond_mountain_fall.jpg" alt="">
    </a>
    <a href="#">
      <img src="http://images.summitpost.org/original/134465.jpg" alt="">
    </a>
    <a href="#">
      <img src="http://www.domnik.net/topoi/commons/AT/alps/05n_mountain.jpg" alt="">
    </a>
    <a href="#">
       <img src="http://people.hsc.edu/faculty-staff/mhight/Fulbright_Images/ItalySept2007/Cassino01.jpg" alt="">
    </a>
    <a href="#">
       <img src="http://www.nyroute28.com/pics/Thurmond_mountain_fall.jpg" alt="">
    </a>
</div>

请记住，HTML 是您的 friend 。组织它以最好地与您的 CSS 并行。这是一个小案例，如果没有结构化程度较低的 HTML，它仍然可以生存，但这是一个很好的入门实践。

这是一个例子:http://codepen.io/anon/pen/LjgdF