html - 如何在 css 中创建 3 列布局？

Question

我一直在尝试为我的程序制作一个复杂的 UI，我希望能够在我的设计中使用 css 拥有 3 列。

这是我目前的代码:

<div style="width:100px;">stuff</div>
<div style="width:100px;">stuff</div>
<div style="width:100px;">stuff</div>

但是，出于某种原因，这将显示 3 行不同的内容。

我试图改变一些东西，但它似乎根本不起作用

我只想在同一 block 上有 3 列。

Answer 1

如果你想在屏幕上有 3 个不同的区域，那么有效的方法是:

<style> .third { width: 33.33%; float: left; } </style>

<div class="third"> Something </div>
<div class="third"> Something </div>
<div class="third"> Something </div>

class="third" 正在添加我制作的 {}内部 的 css。 - 这意味着每个 div 都被赋予了 width: 33.33%(屏幕的 1/3)和一个 float: left，这只会移动区域以便能够移出正常的 CSS 和 HTML 堆叠范围。

希望对您有所帮助! :)