如何把三個div與css放在同一行？

Question

如何把三個div放在使用css的同一行上？

<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

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

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

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 S作爲內聯樣式，我的意思是它更容易你理解。你應該將它們移動到外部樣式中。