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

I have 6 images that I want to have at the bottom and one large image above them. I am trying to make an image gallery.

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

I have set margin-top to the 6 images. I have added the other image which I want larger for the preview image but it seems to be making the other images move down and some out of the div. I know this may have something to do with the images being floated? I am a bit confused on where to put the float I initially just floated the images but it didn't seem to need it I guess because they're inline.I may possibly need to put them in divs? Overall I'm just confused :/

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

Here is an image to make it clear what I want to achieve:

这是一个图像,以明确我想要实现的目标:

Here is my code:

这是我的代码:

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........... */

2 个解决方案

#1

Do something like this,then you can position first images as per your wish. Something you will get in 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

Organize

---

1. You need to organize your HTML for layout.

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

   Try inserting your big image in a <div class="displayImage"></div> tag. Then you can control it easier with your CSS.

   尝试在

   标记中插入大图像。然后,您可以使用CSS更轻松地控制它。

2. Use CSS to define constraints.

   使用CSS定义约束。

   Let's try adding appropriate widths to your images and fixing the margins.

   让我们尝试为图像添加适当的宽度并修复边距。

---

Updated 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;
}

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

Just remember, HTML is your friend. Organize it to best parallel with your CSS. This is a small case that could still survive without less structured HTML, but it's a great practice to get started.

请记住,HTML是你的朋友。组织它以与CSS最佳并行。这是一个小案例,可以在没有结构化的HTML的情况下继续存在,但这是一个很好的实践。

Here's a example of it all: http://codepen.io/anon/pen/LjgdF

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