1

私はこのサイトを構築しています: http://reprezenta.us.lt/

私が必要としているのは、ホームページに 6 つの投稿を配置することです。3 つの行を 2 行で、1 つをもう 1 つの上に配置します。

最初の 3 つの投稿を配置することができました。ここで、最初の 3 つの投稿の下に、他の 3 つを別の行に積み重ねる必要があります。

これを達成する方法についてのアイデアはありますか？220px の最初の列は投稿ではないことに注意してください。

ありがとう！

4

3 に答える 3

1

これを行うには、次の 2 つの方法があります。

  1. 3 つの div の各セットを別の div 内にラップし、必要に応じて CSS スタイルを適用します。
  2. クラスまたは ID を 4 番目の div に追加し、CSS に clear:both を使用して、他の 3 つの div の下に行をドロップします (これを行った後、3 つの div の 2 番目のセットが適切に整列するかどうかはわかりませんが、実験するだけです）。
于 2012-08-24T07:49:17.000 に答える
1

投稿のフローティングに関して、あなたは正しくやっています。ここでの問題は、それらがすべて異なるサイズであるため、きれいなグリッドに浮かぶのではなく、最初の投稿が高すぎるため、2 番目と 3 番目の投稿 div によって作成されたスペースを埋めていることです。

PHP を使用して 3 つの投稿ごとにクリア要素を挿入するか、各投稿の div を同じ高さにして、きれいなグリッドに並ぶようにする必要があります。

また、コンテンツ グリッドに干渉しないように最初の列 (220px) を独自のコンテナーにするか、右側全体を占めるように十分な高さにする必要があります。その下にさらにコンテンツを配置する場合は、独自のコンテナーを提供します。

したがって、サイドバーとコンテンツの 2 つの親コンテナーが存在することになります。サイドバーには左端に属するすべての要素が含まれ、コンテンツには繰り返し投稿グリッドが含まれます。

投稿 div の高さに関する例を見ると、styles.css の 1512 行目に固定の高さを追加すると、サイド バーを分離する必要があることと、投稿 div をきれいにフロートさせる方法の両方が示されます。

.news-widget-item {
    margin-bottom: 40px;
    height: 420px;
}
于 2012-08-24T07:51:42.950 に答える
1

.column, .columnsセレクターの CSS を変更する必要があります。現時点では：

float: left;
display: inline;
margin-left: 10px;
margin-right: 10px;

まず、要素をインラインおよびフロートで表示することはできません。何かをフロートさせると、ブロック レベルの表示に適応します。とにかく、あなたの場合、inline-block代わりに試してみます：

display: inline-block;
margin-left: 10px;
margin-right: 10px;
vertical-align: top;

これにより、要素がうまく積み重なっていきます。最新のすべてのブラウザと IE8+ で動作するはずですが、レガシー ブラウザでは CSS のトリックが必要になる場合があります。

これにはnewspost要素も含まれます。外部に表示したい場合は、次のようにすることができます。

.newspost.columns {
    position: absolute;
    margin-left: -230px;
}

次にコンテナを調整します。

.container {
    padding-left: 230px;
    width: 730px;
}

ここに画像の説明を入力

于 2012-08-24T08:06:37.200 に答える