1

对于“菜鸟”的问题，我很抱歉，但这让我发疯了……

<div id="footer">
        <div id="footer_wrapper">
            <div id="project_wrapper">
                <div class="footer_image_div project 1">
                    <p>Axance</p>
                    <img src="/axance/img/upload/small/1336465127.jpg" class="footer_image" alt="" />
                    <div class="info_div">
                        <a href="/axance/projects/view/3">Lees meer...</a>
                    </div>
                </div>
                <div class="footer_image_div project 2">
                    <p>Axance</p>
                    <img src="/axance/img/upload/small/1336465159.jpg" class="footer_image" alt="" />
                    <div class="info_div">
                        <a href="/axance/projects/view/4">Lees meer...</a>
                    </div>
                </div>
                <div class="footer_image_div project 3">
                    <p>Dit is een test</p>
                    <img src="/axance/img/upload/small/1336481215.png" class="footer_image" alt="" />
                    <div class="info_div">
                        <a href="/axance/projects/view/5">Lees meer...</a>
                    </div>
                </div>
                <div class="footer_image_div project 4">
                    <p>Test project</p>
                    <img src="/axance/img/upload/small/1336564574.jpg" class="footer_image" alt="" />
                    <div class="info_div">
                        <a href="/axance/projects/view/6">Lees meer...</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是样式表：

    #footer_wrapper {
      margin-bottom:auto;
      margin-left:auto;
      margin-right:auto;
      margin-top:auto;
      width:1000px;
    }

#footer_wrapper {
  margin-bottom:auto;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  width:1000px;
}
.project {
  height:220px;
  width:270px;
}
style.css (line 105)
.footer_image_div {
  float:left;
  padding-left:21.66666666666667px;
  padding-right:21.66666666666667px;
}

现在我想要的是所有 4 个 DIVS 都在project_wrapper（行内）中，并且只显示 3 个，而另一个隐藏在 div 之外。我该如何管理？

我再次为这个菜鸟问题和冗长的信息感到抱歉。

4

2 回答 2

1

您的 div 宽度 + 您在它们上的边距加起来超过 1000 像素，并迫使最后一个 div 到下一行（在 div 之外）。

如果将 .project 的宽度更改为：

.project {
  height:220px;
  width:200px;
 }

它们都将像这样放在一条线上：http: //jsfiddle.net/v57n3/

或者，您可以通过添加额外的类来定制第一个和最后一个 div 的边距。或者您可以减少 .footer_image_div 上的边距

.first{ margin-left:0px;}

或者

.last{ margin-right:0px;}

这解释了盒子模型。http://www.w3schools.com/css/css_boxmodel.asp

于 2012-05-09T12:41:04.663 回答
0

加在一起的所有项目 div 的宽度大于容器的宽度

于 2012-05-09T12:43:23.863 回答