1

さて、私はdivシステムをグリッドとして機能させ、マージンも機能させるように努めてきました。マージンがないように、グリッドの最後のdivが必要です。ここにある私のjsfiddleで見ることができるように：http：//jsfiddle.net/kyFBr/ 、最後のdivには右側にマージンがあります。

「写真4」という最後のdivに別のクラスを使用することはできません。これは、最終的にこのデータがデータベースから取得され、そのdivの位置が変わり、別のdivがその場所に表示されるときのフォーマットが必要になるためです。

グリッドの正方形には、クラス「grid1」のみを使用できます。

すべてのグリッドの正方形が含まれているdivは、これをcssとして使用します。

div.events {
    width: 970px;
    margin-left: auto;
    margin-right: auto; 
    text-align: left;   
}

そして、グリッドのcssは次のとおりです。

div.grid1 {
width: 219.5px;
    margin-right: 3px;
    float: left;
    padding:10px;
    background-image: url('debut_dark.png'); /*Image From SubtlePatterns.com*/
    margin-bottom: 3px;
}

誰かが解決策を持っていますか？ありがとう。

4

4 に答える 4

4

とても簡単

http://jsfiddle.net/kyFBr/8/

.rowは960pxである必要があり、マージンの場合は-6px = .wrapperの場合は954です。簡単な計算では、次のようになります。

.row{
    width: 960px;
    margin:0 auto;
    text-align: left;     
}

.wrapper{
    color: white;
    width: 954px;
    height: auto;
    margin: 0 3px 3px 3px;
    background-image: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/debut_dark.png'); /*Image From SubtlePatterns.com*/
}

.wrapper p{ padding:15px; } /* DON'T USE PADDING ON THE GRID!! but here! inner elements! */

div.grid1 {
    width: 234px; /* MATH + */
    margin: 3px;  /* MATH = 960 */
    float: left;
    background-image: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/debut_dark.png'); /*Image From SubtlePatterns.com*/
}

div.grid1 p {  
    text-align: center;
    padding:15px;
}

あなたが好きなようにするよりも数学を続けたい場合：

.grid1, .grid2{
    position:relative;
    display:inline;
    margin:3px;
    float:left;
    background-image: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/debut_dark.png'); /*Image From SubtlePatterns.com*/
}

.grid1 {width: 234px;}
.grid2 {width: 474px;}

フィドルの例

于 2012-12-17T04:23:31.483 に答える
2

発生している問題は、CSSが最新のCSSレベル3プロパティまでカウントできないことが原因です。必要なのは：nth-​​childで、具体的:nth-child(4n)には（n4番目だけでなく4番目ごとを表します）

div.grid1:nth-child(4n) {
    margin-right:0px;
}

デモ： http： //jsfiddle.net/tvx7m/2/show
ソース： http： //jsfiddle.net/tvx7m/2

もちろん、このソリューションは、CSSレベル3をサポートする最新のブラウザーでのみ機能します。

本当のクレジットは@Frederikに行きます（答えてください、そして私は私のものを削除します）

于 2012-12-17T04:18:44.667 に答える
0

'の幅を次のように変更します。'.wrapperの幅を次のようにwidth: 917px; 変更します。.grid1margin-right

margin-right: 1px;
margin-left: 2px;

ここで：http：//jsfiddle.net/yentup/kyFBr/5/show/

完璧に並んでいます！

于 2012-12-17T03:55:36.857 に答える
0

グリッドクラス（要素は複数のクラスを持つことができます）のようなクラスを作成し、margin-rightを0にリセットします。またはCSS3疑似セレクターを使用.lastします。.omega:last-child

最後の子の場合、おそらく行を...行にグループ化する必要があります。それ以外の場合は、n番目の子を使用して3つおきの要素に影響を与えることができます

または、この気の利いたグリッドジェネレーターhttp://grids.heroku.com/を使用してCSSを作成してみてください

于 2012-12-17T04:09:36.687 に答える