Question

我正在尝试使用CSS制作可扩展的网格布局，并且我遇到了两个让我疯狂的问题，所以非常感谢任何帮助

1）我有一个宽度设置为100％的div（隐藏溢出）所以它覆盖了完整的浏览器窗口和我试图放置的div内部，比如5，另一个旁边的div，宽度为20％但最后一个我希望它稍宽（21％）。虽然我在父容器上隐藏了溢出，但最后一个div被包裹在其他四个下面而不是保留在同一行上。我知道发生这种情况是因为子div的聚合宽度大于父div，但这不会通过使用溢出隐藏来阻止吗？

2）我遇到的第二个问题与第一个问题有关。我有最后一个例如21％，因为如果我把它留到20％以便装入容器，在窗口调整大小时会在页面的右端出现一个小间隙。这只发生在webkit浏览器上，因为它们处理像素舍入的方式。

到目前为止，我试图找到一种方法来解决这个问题。我想要实现的是将多个div放在另一个旁边，覆盖整个浏览器宽度，并在调整大小时继续这样做。

我已经找到了一种解决方法，当调整大小结束时使用javascript来调整最后一个div的大小但是必须有更正确的方法来执行它，或者只使用CSS？

Answer 1

我认为使用margin-right:-1px;可能是问题的最佳解决方案，它基本上使图像的布局宽度为20％，但其可见宽度仍为21％。

HTML

<div id="grid">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e"></div>
</div>

CSS

#grid {width:100%;height:100px;}
#grid > div {width:20%;height:100px;float:left;}
#grid > div:last-child {width:21%;margin-right:-1%;}
.a {background-color:#F00;}
.b {background-color:#F33;}
.c {background-color:#F66;}
.d {background-color:#F99;}
.e {background-color:#FBB;}

http://jsfiddle.net/ER7ML/1/

至于overflow:hidden;不起作用的原因，它不会中断页面的布局方式。您可以使用以下解决方案来隐藏具有width:101%的内部div的溢出。我认为这个问题并不像以前的解决方案那样好。

HTML

<div id="outer">
  <div id="grid">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
  </div>
</div>

CSS

#outer {width:100%;height:100px;}
#grid {width:101%;}
#grid > div {width:20%;height:100px;float:left;}
#grid > div:last-child {width:21%;}
.a {background-color:#F00;}
.b {background-color:#F33;}
.c {background-color:#F66;}
.d {background-color:#F99;}
.e {background-color:#FBB;}

http://jsfiddle.net/yUPh7/1/

Answer 2

为最后一个元素赋予以下属性将使其占据容器的完整剩余宽度：

#grid > *:last-child {
    float:    none;
    overflow: hidden;
    width:    auto;
}

这是OOCSS网格框架的简化版本。以下演示中提供完整的测试用例和链接：

http://codepen.io/barneycarroll/pen/cAykE

Answer 3

你可以尝试这样的事情。

CSS

body, html, div {
    margin:0px;
    padding:0px;
}

.main {
    width:100%;
    height:100px;
    background-color:#000000;
    position:relative;
    overflow:hidden;
}

.col1, .col2, .col3, .col4, .col5 {
    position:absolute;
    top:0px;
    width:20%;
}

.col1 {
    left:0px;
    background-color:#ff0000;
}

.col2 {
    left:20%;
    background-color:#ffcc00;
}

.col3 {
    left:40%;
    background-color:#00ff00;
}

.col4 {
    left:60%;
    background-color:#0000ff;
}

.col5 {
    left:80%;
    width:21%;
    background-color:#cc00ff;
}

HTML

<div class="main">
    <div class="col1">div 1</div>
    <div class="col2">div 2</div>
    <div class="col3">div 3</div>
    <div class="col4">div 4</div>
    <div class="col5">div 5</div>
</div>

css浏览器像素舍入/溢出隐藏百分比

3 个答案: