Question

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

我试过浮动较小的图像，使它们站在大图像旁边，如果我添加了一个clearfix，但是由于某种原因，我应用于图像的宽度不再有效。因此，无论是正确定位的大图像还是整个地方的小图像。

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

这可以在HTML＆amp; 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/

提前致谢。

Answer 1

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

<ul>标记用于列表。这个定义经常被使用它们创建一个＆＃34;列表的开发人员拉伸。用于导航的链接，但在这种情况下，使用<ul>和<li>结构会使图像布局变得复杂。通过简单的<div>标记可以更好地为您提供服务，其中a）不需要<ul>和<li>标记，b）在语义上更有意义，因为这是事实上，不是一个清单。
将<div>置于<ul>内，与#mainimage div一样，这是不好的做法。
你的CSS中的选择器group实际上并没有做任何事情。我搜索了这个，因为我以前从未见过它，也无法想出关键字的用途。元素后跟＆＃34; group＆＃34;没有获得您尝试申请的样式。我会从你的CSS中删除它。
您的css中只有普通的width（不是max-width）
切勿使用<br>标记在布局中创建空间。请改用边距和填充。
确保所有标签都已关闭并打开。当JSfiddle将文本突出显示为红色时，表示您缺少标记的一部分。（在您的情况下，每组中有一个</a>个标签太多。）

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

如果您有更多问题，请与我联系！

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

1 个答案: