居中一個 <div> 最大寬度，使用Javascript / JQuery
[英]Centering a <div> with a max-width, using Javascript/JQuery
問題描述
我一直在尋找一種方法來設置一個最大寬度設置的div。 我假設我可以通過給出最大寬度為90％的div和一個自動邊距，然后使用jQuery查找並設置一個固定寬度，我希望，自動邊距將為我居中。
像下面這樣的東西。
JQuery的：
$(function(){
$wrap = $('#wrap');
$wrap.width($wrap.width());
});
CSS：
#wrap {
max-width:90%;
margin:auto;
}
HTML：
<div id="wrap">
<img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
<img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
<img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
<img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
<img src="http://icdn.pro/images/en/h/a/happy-smiley-face-icone-6672-96.png" />
</div><!-- end div id="wrap" -->
所以基本上，我想制作一個包裝div，我可以充滿圖像，但屏幕寬度不會超過90％; 采取包裝並使其居中。 這可能嗎？ 我理解我的JQuery思維幾乎肯定是錯的。 我是新手，但我認為Javascript是解決這個問題的方法。
4 個解決方案
解決方案1
1 2011-06-21 19:33:25
不需要Javascript，一切都很好。
解決方案2
1 已采納 2011-06-22 15:11:30
如果其他人都很好奇，我想出了一種JQuery方式來做我想做的事情。
我有一堆統一大小的圖像，我想在一個可擴展的div中，它也有90％的最大寬度。 這是我想出的：
JQuery的：
function divResize() {
var divWidth;
var extra;
divWidth = $(window).width() * .9;
extra = divWidth % /*IMAGE SIZE IN PX*/;
divWidth = (divWidth - extra);
$("#wrap").css({ width: divWidth });
}
$(document).ready(divResize);
$(window).resize(divResize);
CSS：
#wrap {
margin:auto;
}
HTML：
<div id="wrap">
<img src="/images.png" />
<img src="/images.png" />
<img src="/images.png" />
<img src="/images.png" />
<img src="/images.png" />
</div>
我想我真正的問題是我無法充分解釋我的問題。 感謝大家的幫助。
解決方案3
0 2011-06-21 19:32:22
什么不在這里工作？ 這對我來說很好，但我認為你不需要javascript？
<html>
<body>
<style>
body { }
#wrap {max-width: 90%; margin: auto; background-color: red}
</style>
<div id='wrap'>a a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa aa a a a aa a<br/>a</div>
解決方案4
0 2011-06-21 19:37:28
如果要將可能較短的行居中，請將wrap的text-align設置為center，或者將其顯示為：inline-block如果您有需要顯示的邊框。
以編程方式更改媒體查詢的最大寬度（Javascript / jQuery）
[英]Change max-width of a media query programmatically (Javascript/jQuery)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.