0

[EDIT RE-OPEN 5-10]
我仍然有同样的问题！主要功能现在都实现了，所以我回到这个问题。我按照建议将 Div 更改为 UL LI 列表。但我仍然无法用产品填充整个区域。每个产品都有一定的宽度和高度。

*我正在为 Elo TouchSystems 1529L 显示器制作这个。屏幕上有 6*10 个产品（左）和一些信息和选项（右）（目前不在图像中）它将在 Google Chrome Kiosk 中运行（全屏）*

我试图得到某种网格，如图所示（在图像中很难看到，但底部有一个 1px 白色行，我试图摆脱它。黑色是屏幕高度的末端）

当前产品区

@RenaatDeMuynck 建议使用高级 CSS3 grid or box-flex，因为我只使用 Google Chrome。

网格似乎非常强大，需要我对代码进行一些更改（这很好）但在我去那里之前，我想确定我是否正确。

对于网格，我必须制作行？是的？这意味着列表不合适！

这是否意味着我需要用 div 回到我的旧结构并添加行？

旧的（带浮动：左；） 

<div products>
    <div product>info</div>
    <div product>info</div>
    <div product>info</div>
    <div product>info</div>
    ...etc
</div>

新的网格？？

<div products>
    <div row>
        <div product>info</div>
        <div product>info</div>
        <div product>info</div>
        ...etc
    </div>
    <div row>
        <div product>info</div>
        <div product>info</div>
        <div product>info</div>
        ...etc
    </div>
    ...etc
</div>

【老Q】

我在 1 个“产品” ul中显示多个“产品” li

for ( i = 0; i < totalProductsOnScreen; i++) {
    HTMLContent += "<li class=productDiv id=empty" + i + " onclick='#'></li>";
} 
document.getElementById("productsUL").innerHTML = (HTMLContent + "<div style='clear:both'></div>");

不要提及id和onclick。它是我在这段代码下填写的

这是更新的CSS

#productsDiv {
    float: left;
    width: 70%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.productDiv {
    list-style: none;
    padding: 0px;
    margin: 0px;
    float: left;
    box-sizing: border-box;
    border: outset;
    border-width: 1px 1px 1px 1px;
    width: 16.66%;/*14.2857%;*/
    height: 10%;
    max-height: 10%;
}

当前代码给出了这个： postimage.org 图像
（必须是一个链接，因为作为初学者我不允许发布图像）

它不是很明显，但在最底部，productsDiv 中有 1 个像素未使用。（红色）。
那没什么大不了的。但是当我放大和缩小时它会改变。有时它的 4 个像素未使用或它的 2 个像素太多。所以我想通过给productDiv的最后一行剩余高度来解决这个问题。

我怎样才能做到这一点？

4

3 回答 3

1

请记住，这height意味着“内部高度”，而不是“外部高度”。产品的高度是 height + margin-top + margin-bottom 的结果。由于您同时修复了内容和容器高度，因此它们并不总是适合。

如果您希望您的容器 100% 被您的内容覆盖，请不要固定其高度。

请记住，由于 productsDiv 仅包含浮动对象，因此在某些浏览器中它可能没有高度。你可能需要破解一点。众所周知的是zoom: 1; overflow: auto，但它有时会引入滚动条。更多信息：http ://www.electrictoolbox.com/clear-float-overflow-auto/

于 2012-09-19T07:14:48.493 回答
1

这是我的最终解决方案。它使用新的 W3C 定义的 flexbox（截至 2012 年 8 月，仅在 Chrome 21+ 中支持）

HTML：

<ul class="products">
  <li>product 1</li>
  <li>product 2</li>
  <li>product 3</li>
  <li>...</li>
  <li>product n</li>
</ul>

CSS：

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

ul.grid {
  /*  As of August 2012, only supported in Chrome 21+ */
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  padding: 0;
  margin: 0;
  width: 600px;
  height: 100%;
  background: silver;
}

ul.grid > li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 98px; /* (600px / 6) - 2px for the borders  */
  overflow: hidden;
  border: outset 1px;
}

ul.grid > li.food {
  background-image: url(images/food.png);
  -webkit-background-size: 100%;
}

演示： http ://codepen.io/anon/pen/unGrt

于 2012-10-05T13:52:47.023 回答
0

我找到了解决办法！

height:100%;
width:100%在产品 css中的行css

小提琴显示了这一点！http://jsfiddle.net/h2Ya8/31/

感谢所有的帮助！

于 2014-07-16T10:50:24.347 回答