文章/答案/技术大牛

发布

社区首页 >问答首页 >在一条线的中心得到一个div。

问在一条线的中心得到一个div。
EN

Stack Overflow用户

提问于 2016-02-04 18:31:10

回答 3查看 96关注 0票数 4

我是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吗？

css

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-02-04 18:34:19

用这个：

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

票数 1

Stack Overflow用户

发布于 2016-02-04 18:35:02

试试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>

票数 4

Stack Overflow用户

发布于 2016-02-04 18:35:12

加宽。将每一个浮动到其继承者的左边。当用作列时，浮标通常需要宽度。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35208856

复制

相似问题

问在一条线的中心得到一个div。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在一条线的中心得到一个div。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在一条线的中心得到一个div。
EN