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

Question

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>

css html

Задан 09/08/2011 в 15:58
источник пользователем Adam Merrifield

На других языках...

5 ответов

голоса

2

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

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

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

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

голоса

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
источник пользователем Neal

голоса

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
источник пользователем nammer

голоса

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
источник пользователем Jason Gennaro

Gareth · Accepted Answer · 2011-08-09 16:05

голоса

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
источник пользователем Gareth