1

重複の可能性：
右側のDivに使用可能なすべてのスペースを埋めさせる

ブログのテーマをデザインしていますが、レイアウトを機能させるのに問題があります。これが私が欲しいものの画像です。

ブログのコンテンツのレイアウト この図は、Webサイト自体ではなく、個々の投稿を表しているため、独自のボックスに含まれているので、それを呼び出します.container。また、紫と緑は別の箱に入っています。それを呼びましょう.content。他の要素は、今のところそれらの色で呼び出されます。

したがって、CSSは多かれ少なかれ次のようになります。

.container { 
    display:block;
    margin:0 25px;
}

.gray, .blue, .content {
    display:block;
    width:100%;
}

.purple {
    display:inline-block;
    width:125px;
    height:100%;
    text-align:center;
}

.green {
    display:inline-block;
}

現時点ではこれですべてです。試しfloatましたが効果がありませんでした。何が起こっているのかはこんな感じです。

ここに画像の説明を入力してください

知っておくべきことがいくつかあります。

  • .containerの幅は設定されていません自動です
  • .purpleその側に行かない.green限り、必ずしも同じサイズである必要はありません。.green
  • .purple高さを設定できます
  • .green肉がどこにあるか、それが実際の投稿が行く場所です、それを覚えておいてください。
  • 私はテーブルが役に立たないと思います、問題は内部にあります.content.
4

3 に答える 3

0

あなたのセクションはすべて<div>要素だと思います。使用する：

.container { 
    display:block;
    margin:0 25px;
}

.gray, .blue, .content {
    display:block;
    clear:both;
    width:100%;
}

.purple {
    float:left;
    width:125px;
    height:100%;
    text-align:center;
}

.green {
    float:left;
}

<br clear="all" />グリーンの直後でdivをdiv閉じる前に追加する必要がある場合もあります。contentまた、divの直後にもう1つ追加する必要がある場合もありますcontent。

于 2012-09-14T20:53:07.283 に答える
0

すべてがdivに設定されていると仮定すると、次のように記述する必要があります。

.container { 
    display:block;
    margin:0 25px;
}

.gray, .blue, .content {
    display:block;
    clear:both;
    width:100%;
}

.purple {
    float:left;
    width:125px;
    height:100%;
    text-align:center;
}

.green {
    float:left;
    min-width: 125px;
}
于 2012-09-14T21:36:38.343 に答える
0

この投稿の回答を使用して、解決策を入手してください。

右側のDivに利用可能なすべてのスペースを埋めさせる

ほとんどすべてのブラウザで最も有効で機能するアプローチであるため、テーブル指向のものをお勧めします。

于 2012-09-14T21:29:30.280 に答える