javascript - 仅使用 CSS 自动调整此 div 的大小

Question

我正在尝试获取 <div class="audio-feed-wrapper">如果有更多 <li> 标签自动调整大小(仅限宽度)它里面的标签，只使用 CSS。如果我必须让它工作，我愿意更改一些 HTML。它还需要始终位于页面中央，无论页面宽度如何。

这里有javascript，太长了，不能在这里发布，它正在为一些HTML标签添加样式，所以最好看看我的jsfiddle，但我会把代码放在下面:http://jsfiddle.net/Draven/FpTp6/4/

正在使用的 jQuery 插件 jCarouselLite:http://www.gmarwaha.com/jquery/jcarousellite/

HTML:

<div id="wrapper">
    <section id="main" class="main">
        <div class="audio-feed-wrapper">
            <div class="arrow-prev"></div>
            <div class="audio-feed-list">
                <ul class="audio-feed">
                    <li><a href="?audio=5" title="Test Title 3"><img src="Test.Title.3.jpg" alt="Test Title 3" /></a></li>
                    <li><a href="?audio=4" title="Test Title 2"><img src="Test.Title.2.jpg" alt="Test Title 2" /></a></li>
                </ul>
            </div>
            <div class="arrow-next"></div>
        </div>
    </section>
</div>

CSS:

/** General **/
 * {
    margin:0;
    padding:0;
}
html {
    font-size:100%;
    overflow-y:scroll;
}
html, body, .nav {
    height:100%;
}
body {
    background:#000;
    font:100 1em/1 Optima, Arial, sans-serif;
    color:#fff;
}
ol, ul {
    list-style: none outside
}
/*Centers entire page*/
 #wrapper {
    position:relative;
    /*Puts container in front of distance*/
    clear:left;
    max-width:580px;
    min-width:417px;
    height:100%;
    margin:0 auto;
    border:0;
    text-align:left;
}
/*End of centering entire page*/

/*main*/
[class|=main], .main {
    font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
    font-size:12px;
    line-height:18px;
    word-wrap:break-word;
}
.main {
    margin:0 auto;
}
/*media*/
 .audio-feed-wrapper {
    position: relative;
    top:10px;
    border: 1px solid #fff;
    max-width: 480px;
    margin: 0 auto;
    padding: 4px
}
.audio-feed li {
    margin-right: 5px;
    line-height: 90px;
}
.audio-feed img {
    vertical-align: middle;
    width: 120px;
    height: 90px
}

Answer 1

嗯。有一种非常简单的方法可以使两个元素相对于彼此居中，这两个元素都有一个 ID。

function getWidth(id)
{
    return document.getElementById(id).offsetWidth;
}

function centerWidth(id1,id2)
{
    return ((getWidth(id2)/2)-(getWidth(id1)/2));
}

这是相当简单的数学。找到两个元素的宽度，然后将每个元素除以 2，然后减去差值(最大值与最小值)。

HTML 可能看起来像这样

<div id="x" width="500">
    <div id="y" width="350">
        something...
    </div>
</div>

然后设置元素

function setElm()
{
    var elm = document.getElementById(x);
    elm.style.position = "absolute";    // Can be set in a CSS file as #x{position:absolute;}
    elm.style.left = centerWidth("x","y") + "px"; //This is actualy CSS generated by JS. So if the width is dynamic, the elements will still be centered correctly. Remember to add the +"px".
}

现在我不明白为什么 div 不扩展，除非某处有“最大宽度”？

--编辑--

您可以尝试给有问题的 div (div class="audio-feed-wrapper") 一个 ID，例如音频提要包装器。

function setElm()
{
    var elm = document.getElementById(x);
    elm.style.position = "absolute";    // Can be set in a CSS file as #x{position:absolute;}
    elm.style.left = centerWidth("x","y") + "px"; //This is actualy CSS generated by JS. So if the width is dynamic, the elements will still be centered correctly. Remember to add the +"px".

    var x = document.getElementById("audio-feed-wrapper");
    var y = x.getElementsByTagName("li");

    width = 0;
    for (var i=0; i<y.length; i++)
    {
         width = width + y[i].offsetWidth;
         // now I don't know if .offsetWidth works here, I'm just guessing here.
    }
    x.style.width = width + "px";
}