13

隣接する要素がいくつかあるとします。

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

次のようにスタイルします。

.container > div {
  display:inline-block;
  white-space:nowrap;
}

を使用しているためdisplay:inline-block、divs はインライン要素として流れます。私がやりたいことは、兄弟divが同じ行に配置されている場合(つまり、間に改行が挿入されていない場合) に適用する CSS ルールを指定できるようにすることです。

例として、div上記の が次の図のように配置されているとします。

[ 1 ][ 2 ][ 3 ][ 4 ]
[ 5 ][ 6 ]

要素 2、3、4、および 6 (つまりdiv、兄弟が同じ行に配置されている) または逆のセット (要素 1 と 5、つまりdiv、前に兄弟がいない) のいずれかに一致する CSS ルールを作成したいと考えています。同じ行に配置されます）。

これは、たとえば、スタイリングに非常に役立ちます（++私が探しているセレクターであると仮定します）

.container > div ++ .container > div {
  /* separator between elements on the same line */
  border-right:1px solid #000; 
}
4

3 に答える 3

6

あると便利ですが、CSS にはそのようなオプションはありません。ドキュメントからの Y オフセットのように、位置データを取得することで JavaScript で検出できます。異なる場合は、代替スタイルのクラス名を追加できます。簡単なjQueryの例:

var topOffset;
$(document).ready(function(){
    $('.container div').each(function(index){
        if (index === 0) {
          // first item, set offset
          topOffset = $(this).offset().top;
          $(this).addClass('new-row');
        } else if (topOffset < $(this).offset().top){
          // new item, new row

          $(this).addClass('new-row');
          topOffset = $(this).offset().top;
        }
    });
});

これにより、次のようになります。

<div class="container">
  <div class="new-row">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="new-row">5</div>
  <div>6</div>
</div>

これは、クラス セレクターを使用して適切にスタイル設定できます。

編集 jsFiddle での作業例

注: サイズ変更では機能しませんが、ウィンドウのサイズ変更で呼び出される関数に移動すると修正できます。

于 2013-03-25T13:56:58.933 に答える
1

試すことができる 1 つのことは、nth-child() セレクターです。しかし、この状況へのアプローチ方法を変更する必要があるかもしれません。

たとえば、新しい行に流れ込む場合でも、各行の最初と最後を除いて、すべての要素の間にギャップを設けることができるように、次のようにすることができます。

HTML :

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

CSS :

.container {
    border: 1px solid red;
    width: 810px;
}

.container > .item {
    border: 1px solid blue;
    display: inline-block;
    margin-right: 10px;
    width: 190px;
}

.container > .item:nth-child(4n) {
    margin-right: 0;
}

これにより、次のようなことができます。

----------------------------------
|  1  |  |  2  |  |  3  |  |  4  |
----------------------------------
|  5  |  |  6  |
----------------------------------

子要素間のギャップに注意してください。もちろん、この方法を使用して他のスタイル、つまり 2 つの div の間のみの境界線を適用することもできます。

これが役立つことを願っています:)

フィドル：

http://jsfiddle.net/p6rn9/

于 2013-03-25T13:56:33.847 に答える