如何使用CSS& Javascript？ [英] How to make a scrolling row of Divs using CSS & Javascript?
问题描述
我试图创建一个动态表单的网页（表示用户可以描述的项目列表）。
I am trying to create a webpage with a dynamic number of forms (to represent a list of items a user can describe.
我的大部分功能，但我想喜欢添加的形式连续出现（如果需要滚动条）我有这个主要工作。在Firefox它的工作原理，但在IE9（在标准模式）一旦内容强制（如果我设置overflow-x：scroll而不是auto我不会得到这个）我可以在视觉移动时滚动条初始化
I have most of my functionality working, but I would like the dymicly added forms to show up in a row (with a scroll bar if needed) I have this mostly working. in Firefox it works as expected, but in IE9 (in standards mode) once the the content forces a scroll bar to be show the below the dymanic forms gets pushed down more for each new item added (If I set overflow-x: scroll rather than "auto" I do not get this) I am OK with the visual shift when the scrollbar initally apears, but after that I would not expect further shifts.
已删除的示例：
<!DOCTYPE html>
<html>
<head>
<script>
var next_id = 1;
function maximize_width(element) {
var w = 0;
var c = element.firstChild;
while (c) {
if (!isNaN(c.offsetWidth)) {
w += c.offsetWidth;
}
c = c.nextSibling;
}
element.style.width = w + "px";
}
function do_add() {
var container = document.getElementById("container");
var t = document.getElementById("template").cloneNode(true); //clone the template
t.id = "item_" + next_id; //create a new unique id
t.className = "item";
next_id += 1;
container.appendChild(t);
maximize_width(container);
}
</script>
<style>
#template{
display:none;
}
#scroll-container {
width: 100%;
margin: 0px;
overflow-x: auto;
overflow-y: hidden;
}
#container{
}
.item{
display:inline-block;
margin: 0px;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="scroll-container">
<div id="container">
<form id="template" class="template">
</form>
</div>
</div>
<button onclick="do_add()">Add</button>
</body>
</html>
推荐答案
/ p>
Doesn't this addition to your header suffice ?
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
（我没有IE在我的linux工作站，但通常足以使IE9工作正常如果doctype已经是正确的）
(I haven't IE on my linux workstation but it is usually enough to make IE9 work as expected if the doctype is already correct)
这篇关于如何使用CSS& Javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
