Question

我用jQuery UI创建了一个时间轴。对我的问题：如果我用图像和文本添加更多年份，如何在该div中动态添加更多空间？在这种情况下：#timline。当我添加更多年时，问题就出现了，我需要更改时间轴内的宽度。它设置为超过3000px。我怎么能阻止这个？在案件

上有一个fiddle

HTML：

<div id="timeline-container">
    <div id="timeline-header">
        <h1>Journey</h1>
        <h2>Show years</h2>
    </div>
    <div id="slider"></div>
    <ul id="timeline">
        <li class="element">
            <img src="img/ikon_lampa_1.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2008</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
                </li>
            </ul>
        </li>
        <li class="element down">
            <img src="img/ikon_tumme_upp_3.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2009</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
                </li>
            </ul>
        </li>
        <li class="element">
            <img src="img/ikon_folk_3.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2010</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
                </li>
            </ul>
        </li>
        <li class="element down">
            <img src="img/ikon_fondforsiktig_4.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2011</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span>
                </li>
            </ul>
        </li>
        <li class="element">
            <img src="img/ikon_ballong_1.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2012</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span>
                </li>
            </ul>
        </li>
        <li class="element down">
            <img src="img/ikon_allralogga_2.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2013</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span>
                </li>
            </ul>
        </li>
        <li class="element">
            <img src="img/ikon_pekare_3.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2014</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS：

body {
    background: white;
    font-family: Arial, sans-serif;
}
#timeline-container {
    width: 100%;
    background: #fef7e7;
    overflow: hidden;
    margin: 40px auto;
}
#timeline-header {
    margin: 0;
    z-index: 100;
    position: absolute;
    display: inline;
    top: 35px;
    left: 50%;
}
#timeline-header h1 {
    font-weight: 100;
    font-size: 16pt;
    margin-left: -10px;
}
#timeline-header h2 {
    text-align: left;
    margin-left: 10px;
    font-weight: bold;
    font-size: 8pt;
    text-transform: uppercase;
}
#slider {
    z-index: 100;
    content:"";
    position: absolute;
    top: 100px;
    left: 200px;
    width: 600px;
    margin: 10px;
}
.ui-slider {
    border: 0;
    border-radius: 0;
    position: relative;
    height: 10px;
    margin: 20px 0;
    background-color: #87c80a;
    background-image: -moz-linear-gradient(left, #39a6dd, #87c80a);
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#39a6dd), to(#87c80a));
    background-image: -webkit-linear-gradient(left, #39a6dd, #87c80a);
    background-image: -o-linear-gradient(left, #39a6dd, #87c80a);
    background-image: linear-gradient(to right, #39a6dd, #87c80a);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff39a6dd', endColorstr='#ff87c80a', GradientType=1);
}
.ui-slider .ui-slider-handle {
    cursor: pointer;
    outline: none;
    top: -10px;
    margin-left: -15px;
    position: absolute;
    z-index: 2;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    border: 0;
    background: #505759;
}
#timeline {
    overflow-y: hidden;
    width: auto;
    min-width: 3650px;
    max-width: auto;
    height: 480px;
    padding: 0px;
}
.element {
    display: inline-block;
    background-color: transparent;
    width: 400px;
    height: auto;
    position: relative;
    top: 100px;
    left: 400px;
    float: left;
}
.down {
    margin-top: 70px;
}
.element > ul {
    position: absolute;
    left: 0px;
}
.element li {
    list-style-type: none;
}
.element img {
    width: 160px;
}
ul li .text {
    width: 260px;
    text-align: center;
    text-indent: 50px;
    position: absolute;
    left: -35px;
}
ul li .text h3 {
    text-align: left;
    margin: 10px 0 10px 43px;
    padding: 5px;
    font-size: 12pt;
    font-weight: bold;
}
ul li .text span {
    font-size: 10pt;
}

的Javascript

$(function () {
    var scrollPane = $("#timeline-container"),
        scrollContent = $("#timeline");

    var scrollbar = $("#slider").slider({
        slide: function (event, ui) {
            if (scrollContent.width() > scrollPane.width()) {
                scrollContent.css("margin-left", Math.round(
                ui.value / 100 * (scrollPane.width() - scrollContent.width())) + "px");
            } else {
                scrollContent.css("margin-left", 0, "left", 0);
            }
        }
    });
});

Answer 1

你去吧

#timeline {
  display: -webkit-inline-box;
  overflow-y: hidden;
  width: auto;
  height: 480px;
  padding: 0px;
}

并为firefox添加显示属性 display：-moz-inline-box; 或类似的东西我相信

如何在div中动态添加更多宽度？

1 个答案: