Question

我有这种结构来自以下代码。尽管我努力和阅读，但我无法做到以下几点在纯CSS中，如何强制X粘贴容器的右边框，在Y2 / Y1 div下？

容器和C没有固定的宽度（为方便起见，我在代码中加了一个固定的宽度）。所有其他的都有固定的宽度。

enter image description here

。我

<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
BODY {
    font-family:Arial;
}

DIV.container {
    width:200px;
    height:20px;
    line-height:20px;
    font-size:9px;
    background-color:yellow;
}

DIV.BlocA {
    width:20px;
    background-color:#AAAAAA;

    float:left;
}

DIV.BlocB {
    width:20px;
    background-color:#999999;

    float:left;
}

DIV.BlocC {
    width:20px;
    background-color:#666666;

    float:left;
}

DIV.BlocX {
    padding-right:9px;
    width:50px;
    background-color:#00E9E9;
    text-align:center;

    float:right;

    -moz-opacity: 0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    filter:alpha(opacity=70);
}

DIV.BlocY1, DIV.BlocY2 {
    width:20px;

    float:right;
}
</style>
</HEAD>

<DIV class="container">
    <DIV class="BlocA">A</DIV>
    <DIV class="BlocB">B</DIV> 
    <DIV class="BlocC">C</DIV>
    <DIV class="BlocY1" style="background-color:red;">Y1</DIV>
    <DIV class="BlocY2" style="background-color:green;">Y2</DIV>
    <DIV class="BlocX">X</DIV>
</DIV>

</BODY>
</HTML>

Answer 1

我不确定这是否是您想要的结果。

CHECK DEMO

我在左边想要的元素上使用了clear:both;和float:left;。我还把'Y'div包裹起来，这样我就能将它们左右浮动。

Answer 2

我与您分享改变我生活的链接以及我如何处理CSS定位

http://www.barelyfitz.com/screencast/html-training/css/positioning/

要控制哪个div位于顶部，您可以为每个div提供z-index。我要么按照一定的顺序浮动它们，要么使用位置相对/绝对

将3个div对齐到父级左侧，并重叠一些

2 个答案: