如何在div中动态添加更多宽度？
我用jQuery UI创建了一个时间轴。 对我的问题：如果我用图像和文本添加更多年份，如何在该div中动态添加更多空间？ 在这种情况下： #timline 。 当我添加更多年时，问题就出现了，我需要更改时间轴内的宽度。 它设置为超过3000px。 我怎么能阻止这个？ 这是案件的小提琴
HTML：
Journey
Show years
-
-
2008
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
-
-
2009
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
-
-
2010
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
-
-
2011
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-
-
2012
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-
-
2013
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-
-
2014
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
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); } } }); });
干得好
#timeline { display: -webkit-inline-box; overflow-y: hidden; width: auto; height: 480px; padding: 0px; }
并为firefox添加display属性，如display：-moz-inline-box; 或类似的东西，我相信