需求：当从后端请求多个元素的时候，固定在一个div里面，若是超过div，会出现横向滚动条，限制换行
1：在父级元素中使用：white-space: nowrap，使父级元素中的内容不换行
2：在子级元素中使用：display: inline-block，使自己元素变成行内块元素
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div横向滚动条</title>
<style>
.healthName {
width: 900px;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;/* 父级元素中的内容不换行 */
}
.healthlist {
display: inline-block;
}
</style>
</head>
<body>
<div class="col-md-6 col-sm-6 col-xs-6 healthName">
<!-- <div class="healthlist">
<img class="img" src="images/point.png"/>
<p>张三丰</p>
<p>89bpm</p>
<p>120/78</p>
</div> -->
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$.ajax({
url: "health.json",
data: {},
type: 'GET',
success: function(data) {
var html = "";
$.each(data, function(i, item) {
html += " <div class='healthlist'>";
html += "<img class='img' src=" + item.image1 + "/>";
html += "<p>" + item.doneNum + "</p>";
html += "<p>" + item.date + "</p>";
html += "<p>" + item.date + "</p></div>";
})
$(".healthName").append(html)
}
});
</script>
</html>
json:
[
{
"image1": "images/fence/fence1.png",
"doneNum": 130,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 80,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 90,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 110,
"date": "120/78"
}, {
"image1": "images/fence/fence1.png",
"doneNum": 52,
"date": "120/78"
}
]
