0

(行の下の実際の質問を参照してください。さらに説明が必要な場合は、上の説明をお読みください)。

CSS では、:last-child と :first-child を使用すると、作業に適したオプションが得られます。テーブルには、CSS セレクターを使用してターゲットにできる 、強いテキスト、およびその他のタグが付属しているため、これらのツールを使用すると、テーブルのすべてのセルの周りに適切な境界線を簡単に配置でき、両側に二重境界線が表示されることはありません。

これを DIV のリストに適用し、それぞれが他の下に表示されるようにするのも簡単です。最後の子の下の境界線を削除するだけで済みます。

しかし：

互いに隣り合って浮動する DIV のリストを使用すると、たとえば 3 つ続けて (幅の合計がターゲット コンテナーの幅を超えて折り返される前に)、常にいくつかの二重境界線が表示されます。いくつかの側面で。

これに対するきちんとしたきれいな CSS ソリューションはありますか?

4

3 に答える 3

1

あなたが探している種類のソリューションは単に不可能だと思います。テーブルを使用している場合、ブラウザーはtdおよびth要素がすべて同じものに属していることを理解し、trそれらがグループとしてどのように見えるかを決定するための簡単なルールを考え出すことができます。

一方、div は非常に多様であり (当然のことですが)、純粋な html と css を使用してそのような関連付けを作成する方法は実際にはありません。のようなことを意味的に言う方法はありませんthe children of this div are going to be on the same row, so they should all share a border。

回避策は簡単です：

http://jsfiddle.net/8uqae/

最後に div 用の特別なクラスを作成し、残りの div の右側にボーダーを付けるだけです。

HTML:

<div>
  <div class="left-end fl"></div>
  <div class="middle fl"></div>
  <div class="middle fl"></div>
  <div class="middle fl"></div>
  <div class="middle fl"></div>
  <div class="middle fl"></div>
  <div class="clr"></div>
</div>​

CSS:

.fl {
  float: left;
}
.clr {
  clear: both;
}
.left-end, .middle {
    width: 30px;
    height: 20px;
    margin: 0;
    padding: 0;
    border-top: solid 1px black;
    border-right: solid 1px black;
    border-bottom: solid 1px black;
}

.left-end {
  border-left: solid 1px black;
}

sriniが指摘したように、これを支援するフレームワークがあり、検討する価値があります。さまざまなサイズの画面でクロスブラウザー対応の div レイアウトを作成するのは難しい場合があるため、特にTwitter Bootstrapなどのフレームワークを検討することは検討に値します。

于 2012-10-22T22:45:55.907 に答える
0

これには Fluid フレームワークを使用することをお勧めします。

http://www.1kbgrid.com/#

于 2012-10-22T22:32:10.873 に答える
0

今まで知らなかった疑似クラスを使用した興味深いアプローチを見つけたようです。

:nth-child

このクラスを使用すると、ブロック内の奇数要素と偶数要素だけを選択できるだけでなく、たとえば、3 番目、6 番目、9 番目の要素ごとに選択することもできます。

このリンクを参照してください

ただし、問題は、リスト内の要素が無限にある場合に機能させる方法がわからないことです。また、IE との互換性がないため、ほとんど使用できません。

于 2012-10-22T22:49:50.960 に答える