2012-02-08 8 views
0

これが可能なのかどうかはわかりませんが、質問する価値はあると思います。私がやろうとしています何追加の余白のためにストップボックスが次の行に壊れることはありませんか?

は、私が所属しているなど、各ボックス(.boxes)どの列、行を、確認する必要はありません簡単に、と私のPHPスクリプトを経由して作成した箱を持っています。私はちょうどボックスのforeachループを行うことができるようにしたい、そしてecho。ここで

は、私が何を言っているかだ。その例でhttp://jsfiddle.net/LUFFP/4/

、あなたは余分なと、私はmargin-rightを無視し、行ごとに2つのボックスを持っているwrapper(#main)を取得しようとしていていることがわかります右のスペースは、他のすべてのDIVに異なるクラスを割り当てる必要はありません。

何か助けていただければ幸いです。

答えて

3

あなたは他のすべてのdiv要素をターゲットにnth-of-type(2n)を使用することができます。その後、右マージンをゼロに設定します。ここ http://jsfiddle.net/ttpK6/1/

の互換性リスト:

http://jsfiddle.net/LUFFP/5/

.boxes_3:nth-of-type(2n) { margin-right: 0px; } 
+0

それを試してみてください、あなたがDanjahの答えのように 'n番目の-child'対' n番目-の-type'が選択する理由に興味があれば、この記事を参照してください。 http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/ – mrtsherman

+0

+1のnood-of-typeブードゥーのために、私はまっすぐに見えることはありません。また、誰も気にしないいくつかのブラウザのサポートを省略したい場合は、私の答えよりも洗練された/よりハックレスではありません。 – Zenexer

+0

うーん、いくつかのブードゥー教が確かにそこにあります - 良いヒントは、:) – danjah

1
#main_2 
{ 
    background: #FF0000; 
    width: 404px; 
    border: 1px solid #000; 
    overflow: hidden; 
} 

.boxes_2 
{ 
    background: #F3F3F3; 
    width: 195px; 
    display: inline-block; 
    margin-right: 10px; 
} 

お知らせオーバーフローを隠しに設定します。特別なCSS3要件はありません。

+0

+1 - 私は禅が好きです。箱から取り出して考える方法。 Punは意図した。 – mrtsherman

+0

@mrtshermanハハ、どうもありがとう。はい、私はそれが箱の外にまだ少しあると思いますか?溢れたマージンは決して誰にも害を与えません。 – Zenexer

+0

どのブラウザを使用しているかわかりませんが、最新のGoogle Chromeでは動作しません。私はもともとこれを試しました( 'overflow:hidden;')。 http://jsfiddle.net/LUFFP/7/ http://cloud.rastalulz.com/1U0G2n2y1i1j0I2l2f25 –

0

#main_2 {background: #FF0000; width: 411px; border: 1px solid #000;} 
.boxes_2 {background: #F3F3F3; width: 205px; float:left;} 
+0

あなたの投稿をブロックするには、各行に4つのスペースを付けるか、エディタで '{}'ボタンを使用します。 – mrtsherman

+0

'overflow:hidden'を追加すると、幅を404pxに変更すると、赤は消えてしまいます。 – Zenexer

関連する問題