我希望将第二行的“div”安排在第一行“div”的正下方，但他们的安排留下了空隙
Posted
技术标签:
【中文标题】我希望将第二行的“div”安排在第一行“div”的正下方，但他们的安排留下了空隙【英文标题】：I want "divs" of second row to be arranged right below first row of "divs" but they getting arranged leaving a gap 【发布时间】：2022-01-05 00:04:46 【问题描述】：CSS： 单击该按钮后，您将看到 div 被连续创建。我希望将第二行的“div”排列在第一行“div”的正下方，但它们的排列留下了空隙。 “div”内的文本对齐不应受到干扰。
function myFunction()
addWordToList("Apple", "Fruit");
var spno = 0;
function addWordToList(Word, Meaning)
spno++;
var dv = document.createElement("DIV");
document.body.appendChild(dv);
dv.setAttribute("class", "tooltip");
dv.setAttribute("id", "pilldiv"+spno);
document.getElementById("pilldiv"+spno).textContent=Word;
dv.insertAdjacenthtml('afterend', " ");
var spn = document.createElement("SPAN");
dv.appendChild(spn);
spn.setAttribute("class", "tooltiptext");
spn.setAttribute("id", "spn"+spno);
document.getElementById("spn"+spno).textContent=Meaning;
.tooltip
position: relative;
display: inline-block;
width: auto;
height: 1.6em;
margin: 4em auto;
padding-left: 10px;
padding-right: 10px;
border-radius: 10%/50%;
background: linear-gradient(to right, #11998E , #38EF7D);
font-weight: 700;
.tooltip .tooltiptext
visibility: hidden;
.tooltip:hover .tooltiptext
visibility: visible;
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="myFunction()">Click to Create Divs</button>
</body>
</html>【问题讨论】：
【参考方案1】：将工具提示的 css 更改为以下内容：
.tooltip
position: relative;
display: inline-block;
width: auto;
height: 1.6em;
padding-left: 10px;
padding-right: 10px;
border-radius: 10%/50%;
background: linear-gradient(to right, #11998E , #38EF7D);
font-weight: 700;
即删除“边距：4em auto;”。由于边距，盒子的实际高度会增加并产生间隙。
【讨论】：
以上是关于我希望将第二行的“div”安排在第一行“div”的正下方，但他们的安排留下了空隙的主要内容，如果未能解决你的问题，请参考以下文章
在WPS中,第一行字数没满,怎么把第二行的合并上来,除了在第二行开头按Backspace之外
div+css布局完整代码 三行两列 另外如果把两列分为四格 怎么做