Question

我一直在寻找一种方法来设置一个设置最大宽度的div。我假设我可以通过给div最大宽度为90％和一个自动边距，然后使用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是解决这个问题的方法。

Answer 1

不需要Javascript，一切都很好。

http://jsfiddle.net/Kyle_Sevenoaks/RvLuE/

Answer 2

如果其他人都很好奇，我想出了一种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>

我想我真正的问题是我无法充分解释我的问题。感谢大家的帮助。

Answer 3

这里有什么用？这对我来说很好，但我认为你不需要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>

Answer 4

如果要将可能的短行居中，请将wrap的text-align设置为center，或者将其显示为：inline-block如果你有一个需要显示的边框。

使用Javascript / JQuery </div>将具有最大宽度的<div>居中

4 个答案: