Проблема в перемещении div

Question

У меня есть три столбца на веб-странице. Один на левой стороне. Другой в центре и последний справа. Я хочу сместить правый div ниже левого div (и левый div является расширяемым div).

Но проблема в том, что правый div и центральный div имеют одинаковый родительский div. И левый div, и родительский элемент right и center div имеют одного и того же родителя. Это то, что я хочу сказать -

 <container>
     <leftContainer>
         <leftColumn>
     <mainContent>
         <rightColumn>
         <centerColumn>

И я хочу сместить <rightColumn> ниже <leftColumn>. Возможно ли это?

Кроме того, поскольку я работаю над пользовательской таблицей стилей, я не могу изменить код, я могу только изменять CSS.

Как мне это сделать?

Answer 1

Если вы знаете высоту левого div, вы можете float: left каждый div, а затем использовать отрицательный margin-height для centerColumn высоты левого столбца.

Пример : <- нажмите для демонстрации </p>

<div id="container">
    <div id="left_container">
        <div id="left">left</div>
    </div>
    <div id="right_container">
        <div id="right">right</div>
        <div id="middle">middle</div>
    </div>
</div>

<style type="text/css">
#container {
    width: 160px;
}

#left {
    float: left;
    width: 80px;
    height: 100px;
    background-color: #eee;
}

#right {
    clear: left;
    float: left;
    width: 80px;
    height: 100px;
    background-color: #ccc;
}

#middle {
    float: right;
    width: 80px;
    height: 100px;
    margin-top: -100px;
    background-color: #aaa;
}
</style>

Answer 2

Я не верю, что это возможно с помощью «простого» исправления. Вы можете думать о div как о блоках, и то, что вы пытаетесь сделать, это держать центральный столбец справа от левого столбца, в то время как правый столбец ниже (что исказит прямоугольник).

Существует исправление, в котором вы можете сделать положение rightColumn абсолютным и установить положение столбца относительно самого окна. Тем не менее, я не предлагаю вам сделать это. Вместо этого вам, вероятно, следует изменить CSS и поместить правый столбец в тот же родительский div, что и левый столбец.