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/

2个分区：右侧居中，左侧悬垂

2 个答案: