2

高さがユーザーの画面解像度 ( div1 ) に依存する中央の div があります。2番目のdiv（ div2 ）をその真下（再び中央）に自動的に配置したいと思います。できれば、計算/ JavaScriptまたはラッピングテーブルを使用せずに

<div id="div1" class="div1"></div>
<div id="div2" class="div2"><input type=image src=bla.jpg></div>

CSS:

.div1 {
    position: absolute;
    overflow: hidden;
    top: 10px;
    left: 0px;
    right: 0px;
    width: 50%;
    height: 65%;
    min-width: 100px;
    min-height: 200px;
    max-width: 200px;
    max-height: 300px;
    background-color: red;
    border: 1px solid #000000;
    margin: 0 auto;
}

.div2 {
    position: relative;
    display: table;
    overflow: hidden;
    top: 200px;
    border: 1px solid #000000;
    padding: 0px;
    margin: 0 auto;
    background-color: yellow;
    visibility: visible;
}

動作 しない

ps 私は display: table を使用しています。なぜなら、私は insite input type=image を持っていて、幅を入力タイプと同じ大きさにしたいからです。

どうすればいいですか？前もって感謝します！

4

2 に答える 2

2

div1 から絶対位置を削除し、ラッパー div に追加します。次に、ブラウザーのレイアウト エンジンが、赤い div の下に黄色の div を配置します。

<div class="wrapper">
    <div id="div1" class="div1"></div>
    <div id="div2" class="div2">lol</div>
</div>

div1 は絶対配置されなくなったため、自動マージンを使用して水平方向に中央揃えできます。

.div1 {
margin: 0px auto;
    margin-top: 10px;
}

http://jsfiddle.net/Y4kga/3/

于 2013-02-06T19:33:54.953 に答える
1

最初の div を絶対位置にしないでください --> http://jsfiddle.net/tPJNg/1/

.div1 {
    overflow: hidden;
    width: 50%;
    height: 65%;
    min-width: 100px;
    min-height: 200px;
    max-width: 200px;
    max-height: 300px;
    background-color: red;
    border: 1px solid #000000;
    margin: 10px auto;
    clear:both;
}

.div2 {
    clear:both;
    display: table;
    overflow: hidden;
    border: 1px solid #000000;
    padding: 0px;
    margin: 0 auto;
    background-color: yellow;
    visibility: visible;
}

それでおしまい。

于 2013-02-06T19:39:38.203 に答える