Выровняйте 3 divs слева от родителя с некоторым перекрытием

У меня есть такая структура, исходящая из следующего кода. И я не могу добиться этого, несмотря на мои усилия и чтение.
В чистом CSS, как я могу заставить X придерживаться правой границы контейнера, находясь под Y2/Y1 divs?Выровняйте 3 divs слева от родителя с некоторым перекрытием

Контейнер и C не имеют фиксированной ширины (для удобства я поставил фиксированную ширину в коде). Все остальные имеют фиксированную ширину.

enter image description here

. I

<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>

источник

2013-12-04 Oliver

Float 'DIV.BlocX' слева вместо правого? – davidpauljunior

@ davidpauljunior: Извините, я допустил ошибку в моем вопросе: я хочу, чтобы X придерживался права. – Oliver

Я разделяю с вами связь, которая изменила мою жизнь, и как я имею дело с позиционированием CSS

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

Для управления ДИВ находится на вершине, вы можете дать каждому из них Z- индекс. Я бы либо поплавал им все в определенном порядке, либо использовал бы положение относительное/абсолютное

источник

2013-12-04 00:57:09

Я не уверен, что это то, что вам нужно.

CHECK DEMO

Я использовал clear:both; и float:left; на элементы, которые вы хотели слева. Я также обернул «Y» div, чтобы я мог плавать ими из стороны в сторону.

источник

2013-12-04 00:58:08

Извините, я допустил ошибку в моем вопросе: я хочу, чтобы X придерживался права. – Oliver

Нравится? http://jsfiddle.net/64Uq5/16/ –

Выровняйте 3 divs слева от родителя с некоторым перекрытием

ответ

Смежные вопросы