Question

我是css的新手。我实际上试图在一行上显示三个div，其中一个元素位于页面左侧，第二个元素位于页面中间，第三个元素位于页面右侧。这是我的剧本

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    #name {
        color: black;
        display: inline;
    }
    #group {
        color: black;
        display: inline;
        float: right;
    }
    #cent {
        color: black;
        display: inline;
    }
</style>

<div id="name" style="color: #000000;">EXAMPLE</div>
<div id="group" style="color: #000000;">GROUP</div>
<div id="cent">TEST</div>

这里输出应该是

EXAMPLE                         TEST                                    GROUP

但输出显示在

中

EXAMPLE TEST                                                  GROUP

任何人都可以帮我解决这个问题.TIA

Answer 1

尝试 Flexbox Demo 2 Demo 3 Browser Support

.content {
  display: flex;
  justify-content: space-between;
}

<div class="content">
  <div id="name">EXAMPLE</div>
  <div id="group">GROUP</div>
  <div id="cent">TEST</div>
</div>

Answer 2

使用此：

#name, #group, #cent {float: left; width: 33.3333%}

Answer 3

添加宽度。将每一个浮在其后继的左侧。当用作柱子时，浮子通常需要宽度。

#name { color: black; float:left; width:33%;}
#group { color: red; float:left; width:34%;}
#cent { color: green; float:left; width:33%}

在一条线的中心获得一个div

3 个答案: