Question

我正在尝试将<div class="audio-feed-wrapper">标记设置为自动调整大小（仅限宽度），如果其中有更多<li>标记，则仅使用CSS。我愿意改变一些HTML IF我必须让它工作。无论宽度如何，它都需要始终以页面为中心。

有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为什么不扩展，除非某处有“max-width”？

- 编辑 -

你可以试着给有问题的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";
}

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

1 个答案: