如何在div内动态添加更多宽度？ [英] How to dynamically add more width inside a div?
本文介绍了如何在div内动态添加更多宽度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用jQuery UI创建了一个时间轴。对我的问题：如果我添加更多年的图像和文字，如何动态地添加更多的空间内的div？在这种情况下： #timline 。当我添加更多年份时会出现问题，我需要更改时间轴内的宽度。它设置为超过3000像素。我怎样才能防止这一点？ Heres 小提琴上的案例
I've created a timeline with jQuery UI. To my problem: If I add more years with images and text, how to dynamically add more space inside that div? In this case: #timline. The problem occurs when I'm adding more years, I need to change the width inside timeline. It is set to more than 3000px. How can I prevent this? Heres a fiddle on the case
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：
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
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添加显示属性：-moz -inline盒;
或类似的东西我相信
and also add display property for firefox like display: -moz-inline-box; or something like that i believe
这篇关于如何在div内动态添加更多宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
