连续两个 div CSS。当一行只有一个div时，左对齐[重复]

Question

在连续对齐我的 div 时遇到问题。当一行中有两个 div 时，一切都很好，但是当一行中只有一个 div 时，这个单一的 div 就很有趣了。有任何想法吗？谢谢

我的CSS：

div:nth-child(odd) {
 display: inline;
 float: left;
 width: 45%; 
}
div:nth-child(even) {
 display: inline;
 float: right;
 width: 45%;
}

截图如下：

如您所见，测试 1 不正确。我想让它坐在左边。

Answer 1

我想你的意思是你想让div排成一行。在这种情况下，您应该参考这篇文章：https://www.designcise.com/web/tutorial/how-to-force-html-elements-to-stay-on-the-same-line;

所以你的代码最终会像这样：

html {
white-space: no-wrap;
}

div:nth-child(odd) {
 display: inline-block;
 float: left;
 width: 45%; 
}
div:nth-child(even) {
 display: inline-block;
 float: right;
 width: 45%;
}