查找左浮动列表的宽度并应用到包装器 div 以使用 css - jQuery 将其居中？答案

【问题标题】：Find the width of a left floated list and apply to wrapper div to center it using css - jQuery?查找左浮动列表的宽度并应用到包装器 div 以使用 css - jQuery 将其居中？
【发布时间】：2010-01-24 08:45:17
【问题描述】：

我希望将 ul 置于 div 中，该 div 是液体布局的左列。为此，我需要设置用于包装 ul 的 div 的宽度。注意：列表项（和内容）是使用 php 从数据库中检索的。

我对您关于如何使用 jquery 执行此操作的建议感兴趣。

考虑以下标记：

<div id="wrapper">

   <div id="left-column">
     <div id="list-wrap">
       <ul>
        <li>Dynamic content 1</li>
        <li>Dynamic content 2</li>
        <li>Dynamic content 3</li>
        <li>Dynamic content 4</li>
       </ul>
      </div><!--/list-wrap-->
   </div><!--/left-column-->

   <div id="right-column">
     Content
   </div><!--/right-column-->

   <div style="clear: both;"></div>

   </div><!--/wrapper-->

使用这个 css：

#wrapper {}
#left-column { float: left; width: 50%; }
#right-column { float: right; width: 50%; }
#list-wrap { margin: 0 auto 0 auto; padding: 40px; }
#list-wrap ul { list-style-type: none; }
#list-wrap ul li { float: left: width 160px; height: 160px; margin: 20px; }

我在 javascript 方面不太聪明，但我认为解决方案需要这样的东西：

找出#left-column 的可用内容区域的宽度。
计算出该宽度适合多少 li（考虑到 #list-wrap 的边距和内边距）。
将图形四舍五入到最接近的 200 像素（160 像素宽度 + 2x20 像素边距）？
将宽度应用于#list-wrap。

这是我之前使用过的符合一些入门标准的东西：

   var menuWidth = 0;
   $(".menu > ul > li > a").each(function(i) {
     menuWidth += $(this).outerWidth(true);
     });
    $(".menu").css("width", menuWidth);

提前感谢您的帮助，

尼尔斯

【问题讨论】：

标签： javascript jquery css css-float liquid-layout

【解决方案1】：

你不需要 js 来做 css 工作！

考虑这种风格：

#wrapper {}
#left-column { float: left; width: 50%; }
#right-column { float: right; width: 50%; }
#list-wrap { margin: 0 auto 0 auto; padding: 40px; }
#list-wrap ul { list-style-type: none; text-align: center; }
#list-wrap ul li { width: 160px; height: 160px; margin: 20px; display: inline-block; }

去掉 float: left; 的 li 项目并添加 display: inline-block;

最后，将text-align: center; 添加到UL 以使其居中

我希望这就是你要找的。p>

【讨论】：

抱歉，IE6 不支持 inline-block 您可以使用 IE7.js（或 IE8.js）插件让 IE6 正确呈现该信息。你可以在这里找到它：code.google.com/p/ie7-js
您好 Raspo，感谢您的反馈。我忘了提到我在 li 中有一些 2 个元素是绝对定位的（一个在另一个之上）。我仍然热衷于 jquery 解决方案，但会求助于 IE8 插件并接受额外的 javascript 库开销:-)

【解决方案2】：

jQuery width function 已经返回可用区域。有了这个，我认为你正在尝试做的事情相当简单：

var ulWidth = $("#list-wrap ul li").width();
$("#list-wrap").width(Math.floor(($("#left-column").width() - 80) / ulWidth) * ulWidth);

如果您也想通用并计算相关的填充和边框，请参阅问题“Total width of element (including padding and border) in jQuery”。

【讨论】：

感谢 Robertc，帮了大忙！

【解决方案3】：

要获取任何元素的宽度，请使用：

var width = $('.selector').width();

要设置任何元素的宽度，请使用：

$('.selector').width( width );

【讨论】：

【解决方案4】：

jquery解决方案：

这不是编写代码的最佳方式，我这样做是为了给你一个想法：

$(function() {
    var availableWidth = $("#list-wrap").width();
    var liWidth = $("#list-wrap ul li").outerWidth(true);
    var numberOfListItem = parseInt(availableWidth/liWidth);
    var newWidth = numberOfListItem*liWidth;
    $("#list-wrap").width(newWidth);
});

注意：在css中添加边距：0；填充：0；到ul

您可以在这里查看：http://jsbin.com/uxaho/3/edit

【讨论】：