0

[編集再開 5-10]
私も同じ問題を抱えています。主な機能はすべて実装されたので、この問題に戻ります。推奨どおり、Div を UL LI リストに変更しました。しかし、まだエリア全体を製品で埋めることはできません。各製品には特定の幅と高さがあります。

*Elo TouchSystems 1529L モニター用に作成しています。画面に 6*10 個の製品 (左) といくつかの情報とオプション (右) (現在、画像にはありません) Google Chrome Kiosk で実行されます (フルスクリーン)*

ここに示すように、ある種のグリッドを取得しようとしています (画像ではわかりにくいですが、削除しようとしている下部に 1 ピクセルの白い行があります。黒は画面の高さの終わりです)

現在の製品エリア

@RenaatDeMuynck は、grid or box-flexGoogle Chrome のみを使用しているため、高度な CSS3 を使用することを提案しました。

グリッドは非常に強力なようで、コードを変更する必要があります (それで問題ありません)。

グリッドの場合、行を作成する必要がありますか? はい？つまり、リストは不適切です。

それは、div を使用して古い構造体に戻って行を追加する必要があるということですか?

古い (float:left; を使用) 

<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 つの「products」ul内に複数の「product」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%;
}

現在のコードはこれを与え ます
:

あまり目立ちませんが、productsDiv の一番下に未使用のピクセルが 1 つあります。（赤色）。
それは大したことではありません。しかし、ズームインとズームアウトすると、それは変わります。場合によっては、4 ピクセルが未使用であるか、2 ピクセルが多すぎることがあります。したがって、productDiv の最後の行に残りの高さを与えることで、これを解決したいと考えています。

どうすればそれを達成できますか?

4

3 に答える 3

1

これが私の最終的な解決策です。フレックスボックスの新しいW3C定義を使用します（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 に答える
1

heightこれは、「外側の高さ」ではなく、「内側の高さ」を意味することに注意してください。商品の高さは、高さ+マージン-上+マージン-下の結果です。コンテンツとコンテナの高さの両方を固定するため、常に適合するとは限りません。

コンテナをコンテンツで100％カバーする場合は、コンテナの高さを固定しないでください。

productsDivにはフローティングオブジェクトしか含まれていないため、一部のブラウザでは高さがない場合があることに注意してください。少しハックする必要があるかもしれません。よく知られているのはですzoom: 1; overflow: autoが、スクロールバーが導入されることもあります。詳細はこちら：http ：//www.electrictoolbox.com/clear-float-overflow-auto/

于 2012-09-19T07:14:48.493 に答える
0

解決策を見つけました！

height:100%;行 css
width:100%製品の css

これを示すフィドル！http://jsfiddle.net/h2Ya8/31/

助けてくれてありがとう！

于 2014-07-16T10:50:24.347 に答える