проблема ширины 3 деления - PullRequest
Новая
       6

проблема ширины 3 деления

1 голос
/ 25 декабря 2010

Я хочу поместить 3 параллельных дел в HTML. div середина должна быть шириной 960px, а центр страницы, div влево и div right будут оба сайта середины div, минимальная ширина страницы будет 1024px, когда ширина браузера больше 1024px, div влево и div вправо, возможно ширина (100%-960px)/2 переполнение-x скрыто. Когда ширина браузера равна и меньше 1024, div влево и div right, может быть width 32px ((1024-960)/2=32px), overflow-x это прокрутка (ширина страницы показывает 1024px. Я использую этот код, но не могу отрегулируйте ширину, если не обновите страницу. Как сделать динамическую регулировку ширины и переполнения-х? Спасибо. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
</head> 
<body> 
<style> 
*{padding:0;margin:0;} 
#box {min-width:1024px; _width:960px;} 
#left {width:32px;float:left;background-color:blue;} 
#middle {width:960px;float:left;background-color:red;} 
#right {width:32px;float:left;background-color:green;} 
</style> 
<script> 
$(document).ready(function() { 
var width = document.body.clientWidth; 

if(width>1024){ 
$('#box').css({ 
width:width + 'px' 
});     
$('#left').css({ 
width:(width-1024)/2+32 + 'px' 
}); 
$('#right').css({ 
width:(width-1024)/2+32 + 'px' 
}); 
} 

}); 
</script> 
<div id="box"> 
<div id="left">1</div> 
<div id="middle">2</div> 
<div id="right">3</div> 
</div> 
</div> 
</body> 
</html>

Ответы [ 2 ]

1 голос
/ 26 декабря 2010

Попробуйте: 

<script> 
$(document).ready(function() { 
  var width = document.body.clientWidth;
  windowResize(width);
  $(window).resize(function() { 
    windowResize(width);   
  });
});

function windowResize(width) {
  if(width>1024){ 
    $('#box').css({ 
      width:width + 'px' 
    });     
    $('#left').css({ 
      width:(width-1024)/2+32 + 'px' 
    }); 
    $('#right').css({ 
      width:(width-1024)/2+32 + 'px' 
    }); 
  } 
}
</script>
0 голосов
/ 25 декабря 2010

Вы можете сделать это, связав некоторый код JavaScript с событием изменения размера:

http://api.jquery.com/resize/

...