0

全て、

絶対配置された要素を隣り合わせに配置したい。私は自分のコードでこの効果を見たことがあると確信していますが、現在のプロジェクトで効果を再現するのに苦労しています。

ここにレイアウトスケッチがあります：

ここに画像の説明を入力

絶対配置要素 (約 100 div) は左から右に整列し、スペースがなくなると、次の行に入ります。これはすべてフロートの仕事のように聞こえますが、位置を微調整するため、絶対位置を使用する必要があります。

私の質問は、親 div 内に絶対配置された div を自動的に整列させるにはどうすればよいかということです。

4

3 に答える 3

1

スペースがなくなると、次の行に分類されます

これは絶対位置の要素では機能しません。なぜなら、それらは絶対位置にあるからです。

これは、jQuery組積造プラグインの仕事のように聞こえます。

アップデート：

はい、もちろん、divは実際には（例）top：-50pxから始まるため、絶対位置が必要です。左：-50px。つまり、レイアウトが表示可能領域の外側でレンダリングを開始すると言うと、これは「より大きな画像」のような錯覚を与えるための意図的な効果です-カヨテ

その場合は、子divでfloatを使用し、代わりに親コンテナをdiv top：-50pxにします。

アップデート：

しかし、divはすべての側面、つまり左、右、上、下から伸びています。フロートは私にこれをさせませんでした。絶対位置とjsを使用すると、行をどこまで伸ばすかを制御できます-Kayote

そうすると、CSSが正しく実行されません。その効果を達成する方法があります。jsfiddle.comでコードを複製するか、リンクしてください。

于 2013-02-28T05:15:11.357 に答える
0

HTML:

<div class="parentContainer">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS:

.parentContainer {
    width: 200px;
}

.child {
    float: left;
width: 40px;
height: 40px;
margin: 5px;
position: relative;
}

これがうまくいくことを願っています。

ヘレとその例http://bittu.github.com/hidden-tiles/

child要素を表示可能な画面を超えて表示したい場合は、幅を指定しないでくださいparentContainer

.parentContainer {
    width: auto;
}
于 2013-02-28T05:23:03.813 に答える
0

html

<div class="wrap">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner noPaddingRight "></div>

  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner noPaddingRight "></div>

</div>

CSS

    .wrap {
float:left;
position:absolute;
    width:100%;
}

.inner {
float:left;
margin:0 0 5px 1%;
    width:23%;
    border:1px solid red;
    height:100px;
}

.noMarginRight {margin-right:0 !important}
于 2013-02-28T05:34:22.340 に答える