得到一个行中心的div

我是新来的CSS。我实际上试图在一行中显示三个div，其中页面左侧的一个元素，页面中间的第二个元素和页面右侧的第三个元素。这里是我的脚本得到一个行中心的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

来源

2016-02-04 Newbie

您应该添加一个'width：33.33333％'并将所有元素都浮动到'left'。 – migg

有很多方法可以做到这一点...浮动和宽度，显示：内嵌块和宽度，显示：表格单元格和宽度，使用flexbox，使用css列....研究一些布局教程 – charlietfl

使用这个：

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

来源

2016-02-04 18:34:19

尝试Flexbox的Demo 2Demo 3Browser 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>

来源

2016-02-04 18:35:02

当我们可以使用'浮动'或'inline-block'，为什么使用flexbox的浏览器支持比2提到的有限？在这种情况下，甚至使用display：table也比flexbox更受欢迎。 –

这是一个有效的答案 – epascarello

是的，但考虑到浏览器的绘画性能，它不好提供没有提及的限制 –

添加宽度。将每个浮动到其后继者的左侧。当用作列时，浮点数通常需要宽度。

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

来源

2016-02-04 18:35:12

得到一个行中心的div

回答

相关问题