css - 2 分割: 右中央、左オーバーハング

Question

親 div と 2 つの子 div があります。[子2]を親の中央に配置したい。そして【子1】は親の左側にぶら下がって欲しいです。[子 1] に絶対位置を与えると、子をコンテナーの外に左に吊るすことができます。ただし、[子 2] は [子 1] の高さだけ垂直方向にずれています。

[c1][   [c2]   ]

このjsFiddleで例を作成しました。どんな洞察も高く評価されます。

ありがとうティム

Answer 1

あなたの.slide-left-overhang(これは子 1 ですよね?) はposition: relative. に設定するとposition: absolute、干渉しなくなります。

その他の注意事項: .slide-container-content幅が含まれている要素よりも大きい - 100% またはテキストを希望する幅に設定してから、マージンの自動を設定します。

の中にたくさんの<p>タグを設定し<h4>ます。それで何をするつもりなのかわかりませんが、意味的に問題があります。

ここで、あなたの私の更新 (マイナーな調整) を参照してください: http://jsfiddle.net/Ye5us/

Answer 2

次の構造を使用します。

HTML

<div class="div_container"> 

    <div class="div_left">

    </div>

    <div class="div_right">

        <div class="div_right_content">

        </div>

    </div>

</div>

CSS

div {

    position: relative;
    height: 200px;
    background: yellow;

}

.div_container {

    width: 500px;
    margin: 0px auto;

}

.div_left {

    width: 200px;
    float: left;

}

.div_right {

    width: 300px;
    float: right;
    background: blue;

}

.div_right_content {

    margin: 0px auto;
    width: 100px;
    background: red;

}

jsFiddle: http://jsfiddle.net/Xk7fP/1/