0

これ以上明確にすることはできません、申し訳ありません。4 つの div を適切に配置したい (コンテンツ div の最大幅である 1150px の幅で)、サイズ変更時に 4 つを実行できない場合、中央に 3 つなど)

>1150px の画面では、http://i.imgur.com/KaOPqZK.pngのようになります。今、私が来ることができる最も近いものはこれです: http://i.imgur.com/6khwQkR.png . 左の最初の子マージンを 0 に設定できますが、複数の行があるため、それらにはまだパディングがあります。新しい行を div として作成することもできません。これは、サイズを変更するとすべてが台無しになり、両方の行に 3/1 しか表示されないためです。

サイズを変更するときは、すべての辺に均等な余白を付けて中央に配置する必要があり、現在のようにはなりません: http://i.imgur.com/GiR1nZ2.png

基本的に、私が今持っているすべてのコードはこれです。他の方法を知らないからです。

div.project-container {
    float: left;
    margin: 0 8px 30px 8px;
    position: relative;
    width: 270px;
}

その日を救うのはJavascriptでなければならないと推測していますが、それで問題ありません。正しい方向へのポインタ、インターネット上の例、すべて大歓迎です。ありがとうございました。

4

1 に答える 1

2

古い答えから適応：

HTML

<div id="container">
    <div class="obj">1</div>
    <div class="obj">2</div>
    <div class="obj">3</div>
    <div class="obj">4</div>
    <div class="obj">5</div>
    <div class="obj">6</div>
    <div class="obj">7</div>
    <div class="obj push"></div>
    <div class="obj push"></div>
    <div class="pushend"></div>
</div>

CSS

#container
{
    max-width: 980px;
    background-color: lavender;
    display: inline-block;
    text-align: justify;
}

.obj
{
    width: 180px;
    height: 180px;
    background-color: lightgreen;
    display: inline-block;
    margin-bottom: 20px;
}
.obj.push {
    height: 0px
}
.pushend {
    width: 100%;
    height: 0px;
    display: inline-block;
}

デモ

于 2013-09-27T20:02:23.733 に答える