html - Div 不会正确定位。

标签 html css position

<分区>

我很抱歉这个“菜鸟”问题,但这让我发疯了......

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

对于菜鸟问题​​和冗长的信息,我再次感到抱歉。

最佳答案

您的 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

关于html - Div 不会正确定位。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10516097/

相关文章:

css - 想要定位将鼠标悬停在不同图像上时出现的图像

javascript - 更改 style.top 时图像不移动

javascript - 三列,每列中的顶部 block 仅固定在列内滚动

html - :hover background? (Twitter-Bootstrap) 忽略了 CSS 圆 Angular

c# - 如何在 Unity 中镜像游戏对象的移动?

html - Foundation & Isotope Transition Animaiton & 断点问题

html img 标签不适用于 CSS Sprite 背景

html - 网页 : Load centered at specific point

javascript - 响应式 Div

html - CSS - 字间距在进行绝对定位时不起作用