html - How to put three divs in the same line with css? -


how put 3 divs on same line using 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> 

edit:

you can use display: flex; , there won't white space

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>


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -