1

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

我已经尝试浮动较小的图像，以便它们与大图像并排，如果我添加一个 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/

提前致谢。

4

1 回答 1

0

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

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

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

如果您有更多问题，请告诉我！

于 2016-01-14T19:18:27.743 回答