3 плавающих дивы с центральной динамической шириной

голоса
3

Хорошо так что моя проблема в том, что я не могу получить центр DIV динамически установить его ширину на основе ширины браузера и до сих пор плавает между двумя дивами.

<style type=text/css>
#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;width:100%;float:left;}
#right{min-height:70px;width:60px;float:right;}
</style>
<div id=container>
    <div id=left>text</div>
    <div id=middle>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.</div>
    <div id=right>text</div>
</div>
Задан 09/08/2011 в 15:58
источник пользователем
На других языках...                            


5 ответов

голоса
2

Вы можете установить ширину среднего DIV с помощью JQuery , как , например:

$('#middle').width($('#container').width()-120);

Рабочая Демонстрационный

Ответил 09/08/2011 в 16:03
источник пользователем

голоса
8

Вы можете попробовать установить свой CSS вот так:

#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;padding:0 60px}
#right{min-height:70px;width:60px;float:right;}

jsFiddle

Ответил 09/08/2011 в 16:05
источник пользователем

голоса
1

Попробуйте это с некоторым тривиальным JavaScript: http://jsfiddle.net/maniator/SjMqU/

var middle = document.getElementById('middle');
var win_width = document.body.offsetWidth;
middle.style.width = (win_width - 140) + 'px';

И эта скрипка работает на изменение размера окна: http://jsfiddle.net/maniator/SjMqU/4/

Ответил 09/08/2011 в 16:06
источник пользователем

голоса
0

Лучший способ сделать это было бы поместить его в таблицу, но если вы не хотите, чтобы просто сделать все дивы ведут себя как ячейки таблицы:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Ответил 09/08/2011 в 16:10
источник пользователем

голоса
0

Вы могли бы сделать что-то вроде этого:

#container{width:100%;
}
#left, #middle, #right{min-height:70px; 
    display:inline-block;
    vertical-align:top;
}
#left{width:19%;
    background:red;
}
#middle{width:60%; 
    background:green;
}
#right{width:19%; 
    background:blue;
}

http://jsfiddle.net/jasongennaro/8BqP9/

Ответил 09/08/2011 в 16:11
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more