Question

我是一名网页设计专业的学生，但仍然没有掌握一切。我已经玩了一段时间了，我试图让它工作但我网站上的一个特定页面不起作用。似乎无法弄清楚为什么，因此为什么我说＆＃34;也许＆＃34; HTML，因为我不完全确定它是一个CSS问题。

以下是我的网站以及我遇到问题的具体页面：http://phlbombers.com/teamlist.html

第一个问题是我想要＆＃34;本赛季＆＃34;部分要远得多。如果单击任何其他选项卡，您将看到该部分位于所有其他页面中的相同位置，您可以在单击页面时立即看到它。可悲的是，＆＃34;团队＆＃34;并非如此。页。

第二个问题与图片有关。我希望前两张照片堆叠，就像它们一样。当我拍到三到六张照片时会出现问题。我想要将这四张图片堆叠成2 x 2.是否可以使用类设置来实现，或者我是否需要更改为ID选择器？

HTML

<div id="col3">
<h2>End of 2014/2015 Season playoff's pic</h2>
<div class="img">
  <a target="_blank" href="images/IMG957247.jpg">
    <img src="images/IMG957247.jpg" alt="2014/2015 Season" width="450" height="300">
  </a>
  <div class="desc">2014/2015 Season</div>
</div>
<h2>Bomber's 2014/2015 Admiral game outing</h2>
<div class="img">
  <a target="_blank" href="images/IMG_0400.jpg">
    <img src="images/IMG_0400.jpg" alt="Bomber's Admiral game outing" width="450" height="300">
  </a>
  <div class="desc">Bomber's Admiral game outing</div>
</div>
<h2>2015 Bomber's golf outing pictures</h2>
<div class="img">
  <a target="_blank" href="images/golf.jpg">
    <img src="images/golf.jpg" alt="Winners of the 2015 gold outing" width="450" height="300">
  </a>
  <div class="desc">Winners of the 2015 gold outing</div>
</div>
<div class="img">
  <a target="_blank" href="images/golf2.jpg">
    <img src="images/golf2.jpg" alt="2015 golf outing" width="450" height="300">
  </a>
  <div class="desc">2015 golf outing</div>
</div>
<div class="img">
  <a target="_blank" href="images/golf3.jpg">
    <img src="images/golf3.jpg" alt="2015 golf outing" width="450" height="300">
  </a>
  <div class="desc">2015 golf outing</div>
</div>
<div class="img">
  <a target="_blank" href="images/golf4.jpg">
    <img src="images/golf4.jpg" alt="2015 golf outing" width="450" height="300">
  </a>
  <div class="desc">2015 golf outing</div>
</div>
</div>

使用CSS：

div.img { border: 1px solid #ccc; float: left; width: 300px; clear: both; margin-bottom: 10px; }

div.img:hover { border: 1px solid #777; }

div.img img { width: 100%; height: auto; }

div.desc { padding: 15px; text-align: center; }
col3 h2 {

padding-bottom: 10px;
font-size: 2em;
border-top: 1px solid;
border-left: 5px solid;
padding-top: 10px;
padding-left: 5px;
Float: left;
border-color: #A28B84;
color: #C2443D;
margin-bottom: 20px;
clear: both;

}

我确定我要留下一些需要的信息，这就是我链接页面本身的原因。如果需要，你可以随时检查它。

谢谢！

Answer 1

第一个问题

您在css中遗漏了以下内容：

.col3

如果没有这些，您的<div class="post"> <h2>Title</h2> <div class="img">...</img> <div class="img">...</img> </div>会占用整个页面宽度，而您的季节框会将其置于其下方。

第二个问题

围绕每个帖子/图库项目创建一个包含div，因此您的结构如下所示：

img

这会为clear: both div提供一个可以浮动的位置。现在只需从.img类中移除float，因为这会取消您的width属性。

还要记得将.img的{{1}}更改为298px，因为此时div总共302px宽（300px宽度+ 2px边框）并且不适合2x2。

我建议您阅读how floats work以更好地掌握概念以及如何正确使用它们。

在我的网站上遇到css和单页的html问题

1 个答案: