使用浮动图像创建特定的响应式布局

Creating a specific, responsive layout with floated images

我一直在尝试为一些图像创建特定的布局。 Layout I would like to create.

我试过浮动较小的图像,使它们与大图像并排,如果我添加一个 clearfix 就可以了,但由于某种原因,我应用于图像的宽度不再有效。所以它要么是位置正确的大图,要么是到处都是小图。

我尝试将所有图像放入单独的 div 标签,然后放入父标签 div,然后浮动,但这有它自己的问题。

这可以在 HTML 和 CSS 中完成,还是我需要沿着 jQuery 路线走?

我会整理代码,我只是想把它记在我的脑海里。

HTML:

<section id="galleryposition">
    <ul id="gallery">
        <div id="mainimage">
        <li>
          <a href="img/8.jpg">
            <img src="img/8.jpg" alt=""></a>
          </li>
          </div>
        <div id="smallphotos">
      <div id="smalllefttop">
          <li>
          <a href="img/2.jpg">
            <img src="img/2.jpg" alt="">
            </a>
          </li>
    </div>
      <div id="smallrighttop">
          <li>
          <a href="img/3.jpg">
            <img src="img/3.jpg" alt="">
            </a>
          </li>
          </div>
      <div id="smallleftbottom">
          <li>
          <a href="img/4.jpg">
            <img src="img/4.jpg" alt="">
            </a>
          </li>
          </div>
      <div id="smallrightbottom">
          <li>
          <a href="img/5.jpg">
            <img src="img/5.jpg" alt="">
            </a>
          </li>
          </div>
           </div>
         </ul>
</section>

CSS:

#gallery {
  margin: 50px 0 0 0;
  padding: 0;
  list-style: none;

}

#galleryposition {
    text-align: center;


}

#gallery img {   
border-radius: 2.5%;

}

#gallery li {
  float: left;
  margin: .5%;
  color: #bdc3c7;

}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

#smalllefttop group {
    max-width:50%;
    float:left; 
}



#smallrighttop group{
    max-width: 50%;
    float:right;

}

#smallleftbottom group{
    min-width:50%;
    float:left;

}

#smallrightbottom group{
    min-width:50%;
    float:right;

}

https://jsfiddle.net/apdeng/wyvzmm9q/1/

提前致谢。

好的,所以我开始研究你的代码,但我基本上只是 re-starting 为你准备的,这不是 SO 的目的,所以这里有一些你需要考虑的事情:

  1. <ul> 标签用于列表。这个定义经常被开发人员使用它们来创建用于导航的 "list" 链接,但在这种情况下,您的图像布局因使用 <ul><li> 结构而变得复杂.简单的 <div> 标签会更好,a) 不需要 <ul><li> 标签,b) 在语义上更有意义,因为事实上这不是, 一个列表。
  2. 像你的#mainimage div.
  3. 一样,将 <div> 放在 <ul> 中是不好的做法
  4. 您 css 中的选择器 group 实际上没有做任何事情。我在谷歌上搜索了这个,因为我以前从未见过它,也无法想出该关键字的用途。 "group" 后跟的元素未获得您尝试对其应用的样式。我会从你的 css 中删除它。
  5. 在 css(而不是 max-width
  6. 中使用普通的旧 width 会取得更大的成功
  7. 切勿使用 <br> 标签在布局中创建 space。请改用边距和填充。
  8. 确保所有标签都已关闭和打开。当 JSfiddle 将文本突出显示为红色时,这意味着您缺少标签的一部分。 (在您的情况下,每组中的 </a> 个标签过多。)

您基本上需要做的是尽可能多地清理您的标记,并使大图像的宽度大约为 50%,其他每个图像的宽度大约为 25%。我说粗略是因为当你在所有这些之间添加边距时,你的总宽度仍然需要加起来达到 100%(超过这个值并且你的一些元素将向下移动到下一行)。当您尝试为图像添加宽度时,这可能就是问题所在。查看 nth-childlast-child 的选择器,以帮助您删除侧面块的边距。

如果您有更多问题,请告诉我!