8

私の html ページには、コンテナー div 内に 2 つの div があります。内側の 2 つの div には「position: aboslute」があります。コンテナ div の左下隅に配置する必要があるためです。

これは、コンテナ div に内部 div が 1 つしかない場合にうまく機能します。しかし、2 番目の div を追加すると、2 番目の div が最初の内部 div の上に配置されます。もちろん、これは理にかなっています。しかし今、私はそれらを互いに重ね合わせるのではなく、互いに隣り合わせにする方法を見つけようとしています.

内部 div が生成されます。そのため、ID を手動で追加することはできません。クラス名は 1 つだけです。

例：

<div id="container">
    <div class="icon">ICON1</div>
    <div class="icon">ICON2</div>
</div>

#container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}

.icon {
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px solid green;
}

誰でもこれを解決する方法を知っていますか?

4

3 に答える 3

9

個々のアイコンではなくラッパー要素で絶対配置を使用すると、そのコンテナ内で好きなようにアイコンをフローティングまたは配置できます。

<div id="container">
    <div class="icon-wrapper">
      <div class="icon">ICON1</div>
      <div class="icon">ICON2</div>
    </div>
</div>

#container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.icon {
    border: 1px solid green;
    float:left;
}
.icon-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
}

デモ: http://jsfiddle.net/sYGfq/3/

于 2012-07-13T18:54:40.790 に答える
0

css で :first-child または :last-child を使用できるのが 2 つしかない場合は、余分な html を追加する必要はありません。数行の CSS で処理できます

ここの例http://jsfiddle.net/sYGfq/6/

最後の子の CSS

.icon:last-child {
    left: 200px;
    border: 1px solid green;
}
于 2012-07-13T18:57:22.427 に答える