jQuery / CSS：按内容设置动态宽度，避免继承 [英] jQuery/CSS: Set dynamic width by content, avoid inheritance

问题描述

我正在建立一个基于jQuery的滑块。有一个显示窗口div的960px，和另一个div里面，包含所有的内容。内容有一个动态宽度，我想要能够检索这个大小，以便滑块脚本确切知道在每一边滚动多远。

I'm building a slider based on jQuery. There's a "display window" div of 960px, and another div inside that holds all the content. The content has a dynamic width and I want to be able to retrieve this size so that the slider script knows exactly how far to scroll on each side.

加载内容（只是输出HTML的纯PHP查询）之后，由于某种原因，div内部仍然存在于另一个div的宽度，我最终得到一个960px内容（即使内容占用更多空间）。我设置div为继承：无！重要和在jQuery我正在寻找一种方法，可能设置初始宽度，然后重置它，并寻找div的总宽度。您将如何处理这个问题？

After loading the content (just plain PHP queries that outputs HTML), for some reason the div inside persists on heriting the other div's width, and I end up getting a 960px content (even if the content takes up more space). I've set the div to "inherit: none !important" and in jQuery I am looking for a way to maybe set an initial width, then reset it and look for the total width of the div. How would you approach this?

var contentWidth = $('#content').width();
$('#content').css('width', contentWidth); // Does not help resetting
alert ("#content width is " + contentWidth); // Gives me 960

推荐答案

必须先移除 width CSS属性并调整 display 属性：

To reset the width, you have to remove the width CSS property first and adjust the display property:

默认情况下，DIV元素具有 display：block 样式，这使得元素采用全宽。临时更改显示属性，以获取真正的最小宽度：

By default, a DIV element has the display: block style, which causes the element to take the full width. Temporary change the display property, in order to obtain the true minimum width:

var display = $("#content").css("display"); //Get current display style
$("#content").css({display:"inline-block", width:""});

//Calculate width
var contentWidth = $('#content').width();

//Return display style, set new width
$('#content').css({width: contentWidth, display: display});

这篇关于jQuery / CSS：按内容设置动态宽度，避免继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！