Дисплей 2 дивы друг на друга, в то время как одна зависит от других дивы

Question

мне нужно иметь 3 дивы на странице:

left (fixed size) | middle (all available space) | right (fixed size)

Проблема заключается в том, что я не имею чего прийти пространство, чтобы отобразить все информацию в left div, потому что в этом случае мой middle div станет слишком маленьким, поэтому пользовательский интерфейс будет затронут отрицательным образом :). Обертка также не является опцией, потому что информация в left div становится беспорядочной.

Итак, я придумал решение для отображения еще одного div сверху left div. Назовем это left div 2 со стилем overflow: hidden;. Используя jQuery, я буду расширять размер left div 2, когда пользователь наводится на него. Теоретически - размер middle div останется прежним. И когда фокус потерян на left div 2 - его размер вернется к норме!

В настоящее время я застрял на CSS макете, который выходит из-под контроля ... Вот ближайший результат, который я придумал: http://jsfiddle.net/KLXPL/11/

Теперь, я хотел бы просить Вас оказать содействие в решении этой задачи! Конечно, я также открыт для предложений, если есть лучшие способы решения этой задачи.

Вот изображение того, чего я хочу достичь. Пожалуйста, извините мои навыки рисования.

P.S. в то время как я писал этот текст, я думаю, что придумал еще одно решение. right div будет привязан вправо с фиксированным размером (как и сейчас). Middle div должен иметь левый край? установлен на 200px и шириной до 100% и справа. left div 2 не требуется, потому что middle div использует левый интервал в левой части экрана (не другой div) ... так что еще не пробовал. Но даже если бы я попробовал - мой css худший :)

Answer 1

Для этого вам не нужен JQuery.

Вот оригинал скрипку обновленный http://jsfiddle.net/DIRTY_SMITH/KLXPL/12/

Ниже приведен пример с использованием только CSS Пример https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/12/

HTML:

<div class="div1"> 
    <h1>Some text that should not break</h1> 
    <p>Some text that should not break to new line</p> 
</div> 
<div class="div2"> 

</div> 
<div class="div3"> 

</div> 

CSS Пример:

.div1, 
.div2, 
.div3 { 
    float: left; 
} 

.div1, 
.div3 { 
    width: 150px; 
    height: 600px; 
} 

.div1 { 
    background-color: yellow; 
    position: absolute; // to place on top 
    z-index: 2;// to place on top 
    white-space: nowrap;// to keep from wrapping 
    overflow: hidden //to not show overflow 
} 

.div1:hover { 
    width: 550px; 
} 

.div2 { 
    width: calc(100% - 300px);//sets 100% of remaining width 
    height: 600px; 
    background-color: green; 
    margin-left: 150px;//Since div1 has absolute position and z-index of 2, 
        //this sets the div to apear next to div 1 
} 

.div3 { 
    background-color: red; 
} 

Answer 2

Итак, @Adam Buchanan Smith, решил про blem of css layout. Но, как я заметил, вы хотели иметь два div слева, один над другим, но только один из них зависит от других divs для размера.

Так что, взяв с себя то, что дал @Adam, вот правильное решение. div left - фиксированный размер, он не увеличивается при наведении, но только левый (который содержит длинный текст) изменяет размер при наведении. Оба divs, однако, находятся выше друг друга, как и хотели.

здесь скрипка: https://jsfiddle.net/daveRexter/syah6soc/7/

<header> 
<div class="left-side"> <!-- div for whole left section --> 
<div class="left">LEFT div</div> 
<div class="left2"> 
<p> 
    my very long text which should be hidden with overflow 
</p> 
</div> 
</div> 
<div class="center">CENTER div</div> 
<div class="right">RIGHT div</div> 
</header> 

CSS код:

body { 
margin: 0px; 
} 

header { 
color: white; 
text-align: center; 
width: 100%; 
background-color: #2995f3; 
} 

.center { 
width: calc(100% - 400px); 
background: green; 
margin-left: 200px; 
float: left; 
} 
.left { 
float: left; 
background: red; 
position: absolute; 
width: 200px; 
} 
.left2 { 
float: left; 
position: absolute; 
width: 200px; 
overflow: hidden; // to hide the overflow of long text 
} 
p{background-color: red; white-space: nowrap;} 
.left2:hover{width: calc(100% - 200px);} 
.right { 
float: left; 
background: red; 
width: 200px; 
} 

Надежда это решает проблему.