如何将三个div与css放在同一行？

Question

如何使用css将三个div放在同一行？

 <div style="width: 100%; height: 30%; background-color: aqua; padding: 0; margin: 0">
            <div style="height: 30%; width: 20%; background-color: #ffd800; margin-left: 0%;padding:0;margin-top:0">
                <%--left--%>
            </div>
            <div style="height: 30%; width: 60%; background-color: #4cff00; margin-left: 20%;padding:0;margin-top:0">
               <%--center--%>
            </div>
            <div style="height: 30%; width: 20%; background-color: #ffd800; margin-left: 80%;padding:0;margin-top:0">
                <%--right--%>
            </div>
        </div>

Answer 1

修改

您可以使用display: flex;，但不会有任何空格

JS Fiddle

＆＃13;

＆＃13;

.container {
    display: flex;
}
.box {
    width: 20%;
    background-color: yellow;
    text-align: center;
}
#center {
    background-color: green;
    width: 60%;
} 

＆＃13;

<div class="container">
    <div class="box">
        <%--left--%>
    </div>
    <div class="box" id="center">
        <%--center--%>
    </div>
    <div class="box">
        <%--right--%>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

删除所有内联样式（宽度除外）并简单地使用：

<style>
    div {overflow: hidden}
    div > div {float: left;}

    /* remove these lines, just for test */
    div > div {background: yellow}
    div + div {background: green}
    div + div + div {background: red}
</style>

<div>
    <div style="width: 20%;">
        <%--left--%>
    </div>
    <div style="width: 60%;">
        <%--center--%>
    </div>
    <div style="width: 20%;">
        <%--right--%>
    </div>
</div>

http://jsfiddle.net/qukpcq8f/

我已将width作为内联样式，我的意思是您更容易理解。您应该将它们移动到外部样式中。