我需要显示4列,并且发现它仅在将完整的HTML写在页面中时才起作用,但是在使用innerHTML时却不能正常工作。 我做了2个样本,这是一个可以正常工作的样本:
<div class="padding">
<div class="row-col">
<div class="row m-b">
<div class="col-md-3">
<a href="javascript:void(0);" onclick="#">
<div class="box">
<div class="box-header blue-grey-50">
<h3>Box Header1</h3>
</div>
<div class="box-body">
<p class="m-a-0">Lorem ipsum</p>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:void(0);" onclick="#">
<div class="box">
<div class="box-header blue-grey-50">
<h3>Box Header2</h3>
</div>
<div class="box-body">
<p class="m-a-0">Lorem ipsum</p>
</div>
</div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:void(0);" onclick="#">
<div class="box">
<div class="box-header orange-300">
<h3>Box Header3</h3>
</div>
<div class="box-body">
<p class="m-a-0">Lorem ipsum</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
和这是相同的,但使用innerHTML:
<div class="padding">
<div class="row-col">
<div class="row m-b">
<div id="data_div"</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(data){
var data = ''+
'<div class="col-md-3">'+
' <a href="javascript:void(0);" onclick="#">'+
' <div class="box">'+
' <div class="box-header blue-grey-50">'+
' <h3>Box Header1</h3>'+
' </div>'+
' <div class="box-body">'+
' <p class="m-a-0">Lorem ipsum</p>'+
' </div>'+
' </div>'+
' </a> '+
'</div>'+
'<div class="col-md-3">'+
' <a href="javascript:void(0);" onclick="#">'+
' <div class="box">'+
' <div class="box-header blue-grey-50">'+
' <h3>Box Header2</h3>'+
' </div>'+
' <div class="box-body">'+
' <p class="m-a-0">Lorem ipsum</p>'+
' </div>'+
' </div>'+
' </a>'+
'</div>'+
'<div class="col-md-3">'+
' <a href="javascript:void(0);" onclick="#">'+
' <div class="box">'+
' <div class="box-header orange-300">'+
' <h3>Box Header3</h3>'+
' </div>'+
' <div class="box-body">'+
' <p class="m-a-0">Lorem ipsum</p>'+
' </div>'+
' </div>'+
' </a>'+
'</div>';
document.getElementById('data_div').innerHTML = data;
});
第二个不显示4列,问题是-为什么不呢?
谢谢。
答案 0 :(得分:1)
首先出现错误<div id="data_div"</div>
,该标签未关闭。另外,这是.row m-b
的子div。删除该div并将ID放入父级。
这是因为.col-md-3
必须是.row
的子元素,而添加<div id="data_div"></div>
则是.row
的子元素,并且(#data_div
)中的所有内容都不是一排。
请参见以下id="data_div"
的代码:
https://codepen.io/StudioKonKon/pen/jXpbPL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test NOT OK</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css" type="text/css" />
</head>
<body>
<div>
<div class="padding">
<div class="row-col">
<div class="row m-b" id="data_div">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
$(document).ready(function(data){
var data = ''+
'<div class="col-md-3">'+
' <a href="javascript:void(0);" onclick="#">'+
' <div class="box">'+
' <div class="box-header blue-grey-50">'+
' <h3>Box Header1</h3>'+
' </div>'+
' <div class="box-body">'+
' <p class="m-a-0">Lorem ipsum</p>'+
' </div>'+
' </div>'+
' </a> '+
'</div>'+
'<div class="col-md-3">'+
' <a href="javascript:void(0);" onclick="#">'+
' <div class="box">'+
' <div class="box-header blue-grey-50">'+
' <h3>Box Header2</h3>'+
' </div>'+
' <div class="box-body">'+
' <p class="m-a-0">Lorem ipsum</p>'+
' </div>'+
' </div>'+
' </a>'+
'</div>'+
'<div class="col-md-3">'+
' <a href="javascript:void(0);" onclick="#">'+
' <div class="box">'+
' <div class="box-header orange-300">'+
' <h3>Box Header3</h3>'+
' </div>'+
' <div class="box-body">'+
' <p class="m-a-0">Lorem ipsum</p>'+
' </div>'+
' </div>'+
' </a>'+
'</div>';
document.getElementById('data_div').innerHTML = data;
});
</script>
</body>
</html>