我正在尝试将一些元素与从后端生成的文本内容放在容器 div 中。 这是 HTML:
<div class="mainContainer">
<div class="1"> ASDdjiajwio </div>
<div class="2"> asdasda </div>
<div class="3"> asdgrsgse </div>
<div class="4"> sdf sfsef </div>
<div class="5"> asdahtd sfsefse </div>
.
.
.
.
<div class="n"> and so on.. </div>
</div>下图显示了我希望如何放置它们。
这是我希望放置元素的方式:
我可以为此使用网格，其中 css 是这样的:
.mainContainer{
width: 30em;
height: 20em;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}但是它看起来像这样 -
是这样的
我希望使用 css 将所有元素正确包装在容器 div 中。有人可以帮我吗？
最佳答案
如果这就是你要找的，简单地做
.mainContainer div{
display: inline-block;
}
代码解释
行内 block
displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
.mainContainer div{
display: inline-block;
border: 2px solid pink;
border-radius: 25px;
margin: 3px;
}<!DOCTYPE html>
<html>
<head>
<title>Blocks</title>
<!-- Do not change this file - add your CSS styling
rules to the blocks.css file included below -->
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="mainContainer">
<div class="1"> ASDdjiajwio </div>
<div class="2"> asdasda </div>
<div class="3"> asdgrsgse </div>
<div class="4"> sdf sfsef </div>
<div class="5"> asdahtd sfsefse </div>
<div class="6"> sdf sfsef </div>
<div class="7"> asdahtd sfsefse </div>
<div class="4"> sdf sfsef </div>
<div class="5"> asdahtd sfsefse </div>
<div class="3"> asdgrsgse </div>
<div class="4"> sdf sfsef </div>
<div class="5"> asdahtd sfsefse </div>
<div class="6"> sdf sfsef </div>
<div class="7"> asdahtd sfsefse </div>
<div class="4"> sdf sfsef </div>>
<div class="4"> sdf sfsef </div>
<div class="5"> asdahtd sfsefse </div>
<div class="3"> asdgrsgse </div>
<div class="4"> sdf sfsef </div>
<div class="5"> asdahtd sfsefse </div>
<div class="6"> sdf sfsef </div>
<div class="7"> asdahtd sfsefse </div>
<div class="4"> sdf sfsef </div>
<div class="n"> and so on.. </div>
</div>
</body>
</html>关于html - 如何使用 css 根据内容宽度在 div 中排列这些制表符/气泡元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49622480/