void(),
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.hot{
border: 1px dashed Gray; height: 200px; width: 100px;
border-radius: 8px;
background-color: #FFFFFF;
flex-shrink: 0;
}
.hot:before{
content: "♠";
color: #FF0000;
}
.slider{
display: flex;
width: 98%;
justify-content: flex-start;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var n = 1+ Math.random()*36|0;
var m = 100 - ($('.slider').width()-175)/(n-1);
m < 0 && (m = -5);
m > 100 && (m = 95);
for (var i=0; i<n; i++) {
$('<div class="hot">'+i+'</div>').appendTo('.slider').css({'margin-right': -m +"px"})}
});
</script>
</script>
</head>
<body>
<div class="slider">
</div>
</body>
</html>