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

我一直在尝试为一些图像创建一个特定的布局

我已经尝试过浮动较小的图像，以便它们与较大的图像并排，如果我添加了clearfix，这会起作用，但由于某种原因，我应用于图像的宽度不再有效。所以要么是位置正确的大图像，要么是到处都是小图像

我试着把所有的图像放在单独的div标签中，然后是父div，然后是浮动的，但这有它自己的问题

这可以在HTML和CSS中完成，还是我需要走jQuery路线

我会整理代码，我只是想把它记在脑子里

HTML:

---

提前感谢。

好的，我开始玩你的代码，但我基本上只是为你重新启动它，这不是它的目的，所以这里有一些事情你需要考虑：

标签用于列表。开发人员通常会扩展此定义，使用它们来创建用于导航的链接“列表”，但在这种情况下，图像布局因使用

和

结构而变得复杂。您最好使用简单的
标记，a）不需要
和
标记，b）在语义上更有意义，因为这实际上不是一个列表
将
放在
中是一种不好的做法，就像您的#main image div一样
css中的选择器
组
实际上没有做任何事情。我在谷歌上搜索这个，因为我以前从未见过它，也不知道这个关键词有什么用途。“组”后面的元素没有得到您试图应用于它们的样式。我会从你的css中删除它
在css中使用普通的
width
（而不是
max width
）将获得更大的成功
切勿使用

标记在布局中创建空间。使用边距和填充代替
确保所有标签都已关闭和打开。当JSfiddle突出显示红色文本时，表示缺少标记的一部分。（在您的情况下，每个组中有一个过多的
标记。）
基本上，你需要做的是尽可能地清理标记，使大图像的宽度大约为50%，其他图像的宽度大约为25%。我说的大概是因为当你在所有元素之间加上边距时，你的总宽度仍然需要加到100%（如果超过这个值，你的一些元素就会跳到下一行）。这可能就是当你尝试增加图像宽度时出错的地方。查看
n个子项
或
最后一个子项
的选择器，以帮助您删除侧面块上的边距

如果您有更多问题，请告诉我
 好的，我开始玩弄你的代码，但我基本上只是为你重新开始，这不是为什么，所以这里有一些你需要考虑的事情：

标签用于列表。开发人员通常会扩展此定义，使用它们来创建用于导航的链接“列表”，但在这种情况下，图像布局因使用
和
结构而变得复杂。您最好使用简单的
标记，a）不需要
和
标记，b）在语义上更有意义，因为这实际上不是一个列表
将
放在
中是一种不好的做法，就像您的#main image div一样
css中的选择器
组
实际上没有做任何事情。我在谷歌上搜索这个，因为我以前从未见过它，也不知道这个关键词有什么用途。“组”后面的元素没有得到您试图应用于它们的样式。我会从你的css中删除它
在css中使用普通的
width
（而不是
max width
）将获得更大的成功
切勿使用

标记在布局中创建空间。使用边距和填充代替
确保所有标签都已关闭和打开。当JSfiddle突出显示红色文本时，表示缺少标记的一部分。（在您的情况下，每个组中有一个过多的
标记。）
基本上，你需要做的是尽可能地清理标记，使大图像的宽度大约为50%，其他图像的宽度大约为25%。我说的大概是因为当你在所有元素之间加上边距时，你的总宽度仍然需要加到100%（如果超过这个值，你的一些元素就会跳到下一行）。这可能就是当你尝试增加图像宽度时出错的地方。查看
n个子项
或
最后一个子项
的选择器，以帮助您删除侧面块上的边距

如果您有更多问题，请告诉我
 你能用在JSFIDLE上不会被破坏的图片链接更新你的FIDLE吗？我不知道哪些元素应该在哪里，因为它们都是破碎的图像图标。你可以这样做：而且，这完全可以用css和html来完成-不需要javascript来完成这个布局。真是个傻瓜，给你&谢谢：你能用JSFIDLE上不会被破坏的图片链接来更新你的FIDLE吗？我不知道哪些元素应该在哪里，因为它们都是破碎的图像图标。你可以使用这样的东西：而且，这完全可以用css和html来完成-不需要javascript来完成这个布局。真是个白痴，给你&谢谢：哇，谢谢。我正在尝试一种新的方法来建造一个画廊，就像有人推荐的那样，我确实觉得这样使用
是很奇怪的！我会把你提到的每件事都看一遍，非常感谢你的帮助。哇，谢谢。我在试一个新的
<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>

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

}