Question

我很抱歉“noob”问题，但这让我发疯了......

<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之外。我该如何管理？

我再次为noob问题和长信息感到抱歉。

Answer 1

你的div宽度+你在它们上的边距加起来超过1000px并且迫使最后一个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

Answer 2

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

分区不会正确。

2 个答案: