几个div在同一行中显示的有关问题
日期：2014-05-16 浏览次数：20367 次
几个div在同一行中显示的问题
问题出在display:inline;，如果不加这句话，div元素能显示；加上之后就显示不了了
这是HTML
这是javascript
这是CSS
------解决方案--------------------
display:inline;的话会根据你div的内容自动伸缩的～～
用display:block;啊
------解决方案--------------------
加点内容就看出来了
问题出在display:inline;，如果不加这句话，div元素能显示；加上之后就显示不了了
这是HTML
html>
<title>
<title>Mypage</title>
<script type="text/javascript" src="temp.js"></script>
<link rel="stylesheet" href="temp.css" type="text/css"/>
<body>
<div id="box">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
</div>
</body>
</html>
这是javascript
window.onload = initAll;
function initAll() {
var id = document.getElementById("box");
var littleBoxs = id.childNodes;
var j = 0;
for(var i = 0;i <littleBoxs.length;i++){
if(littleBoxs[i].id != null){
if(parseInt(littleBoxs[i].id.substr(3,1)) % 2 == 0){
littleBoxs[i].className = "classRed";
} else {
littleBoxs[i].className = "classYellow";
}
}
}
}
这是CSS
#box {
height:100px;
width:600px;
}
.classRed {
background-color:red;
display:inline;
width:100px;
height:100px;
}
.classYellow {
background-color:yellow;
display:inline;
width:100px;
height:10px;
}
------解决方案--------------------
display:inline;的话会根据你div的内容自动伸缩的～～
用display:block;啊
------解决方案--------------------
<div id="box">
<div id="box1">111</div>
<div id="box2">222</div>
<div id="box3">333</div>
<div id="box4">444</div>
<div id="box5">555</div>
<div id="box6">666</div>
</div>
加点内容就看出来了
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
