Question

我想在底部有6张图像，在它们上面有一张大图像。我正在尝试制作图片库。

我为6张图片设置了margin-top。我已经为预览图像添加了我想要更大的其他图像，但它似乎正在使其他图像向下移动而一些在div之外。我知道这可能与浮动图像有关吗？我有点困惑在哪里放浮动我最初刚浮动图像但它似乎不需要它我猜是因为它们是内联的。我可能需要把它们放在div中？总的来说，我只是困惑：/

这是一张图片，清楚地说明了我想要实现的目标： enter image description here

这是我的代码：

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

整理

您需要整理HTML以进行布局。

尝试在<div class="displayImage"></div>标记中插入大图片。然后，您可以使用CSS更轻松地控制它。
使用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是您的朋友。将其整理到最适合您的CSS。这是一个小案例，可以在没有结构化的HTML的情况下继续存在，但它是一个很好的开始实践。

以下是一个例子：http://codepen.io/anon/pen/LjgdF

Answer 2

执行此类操作，然后您可以根据自己的意愿定位第一张图像。你会在Fiddle

中得到的东西

<div class="mainInfo">
    <div class="gallery">
        <div class="bigpic">
            <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>
        </div> 
        <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>
</div>

将图像定位在图像上方（图库）

2 个答案:

整理