<!doctype html>
<html>
<head>
<style>
.container {
position: fixed;
top: 45px;
right: 4px;
height: 0;
text-align: right;
overflow: visible;
}
.card {
display: inline-block;
max-width: 200px;
line-height: 24px;
padding: 8px 12px;
margin-bottom: 4px;
color: -sharpFFFFFF;
text-align: left;
background-color: -sharpF68C1E;
}
</style>
</head>
<body>
<div class="container">
<div class="card"><span></span></div><br>
<div class="card"><span></span></div><br>
<div class="card"><span></span></div>
</div>
</body>
</html> this is the desired effect at the moment, but you need to use
to wrap the line. I"ve tried
.card::after {
content: "\A";
white-space: pre;
} but it has no effect on the elements of inline-block, and inline-block is used to fit the div to the content size rather than to fill the parent div width.
is there any great god who can help achieve the simple structure of removing the same effect of
? thank you very much.
Preview code: http://runjs.cn/detail/kjprizbv