如何有並排固定和％要素在一條線上

Question

我希望有一個容器將被填充在一個單一的線路按以下方式：

• 60像素固定黃色

然後

• 20％藍色
• 60％黑色
• ：剩餘空間20％的紅色

這是我到目前爲止（不工作）：

CSS

body { 
    background-color: #fff; 
    padding: 0px; 
    margin:100px; 
} 

.container { 
    overflow: hidden; 
    padding: 0px; 
    margin: 0px auto; 
    width: 90%; 
    background-color: white; 
    border-radius: 10px; 
    box-shadow: 0px 0px 6px 0px #ccc; 
} 

.blue_container { 
    background-color: blue; 
    width: 20%; 
    float:left; 
} 

.black_container { 
    width:60%; 
    float:left; 
    background-color: black; 
} 

.red_container { 
    width: 20%; 
    float:left; 
    background-color: red; 

} 

.fixed_conatiner { 
    float:left; 
    background-color: yellow; 
    width: 60px; 
} 

.transparent_container[type="fixed"] { 
    padding:0px; 
    margin:0px; 
    width: 60px; 

} 

.transparent_container[type="avazmishe"] { 
    padding:0px; 
    margin:0px; 
} 

HTML

<div class="container"> 
    <div class="transparent_container" type="fixed"> 
     <div class="fixed_container"><br/></div> 
    </div> 
    <div class="transparent_container" type="resizable"> 
     <div class="blue_container"><br/></div> 
     <div class="black_container"><br/></div> 
     <div class="red_container"><br/></div> 
    </div> 
</div> 

Answer 1

你是上正確的軌道，所有你需要做的就是從你的減去固定的容器寬度有左邊緣的流體容器。試試這個：

.transparent_container { 
    margin-left: 60px; 
} 

Answer 2

這裏是你的答案Meysam：

http://jsfiddle.net/EcZ5j/

HTML：

<div class="container"> 
      <div class="transparent_container" type="fixed"> 
       <div class="fixed_conatiner"> 
        <br/> 
       </div> 
      </div> 
      <div class="transparent_container transparent_container_2" type="resizable"> 
       <div class="blue_container"> 
        <br/> 
       </div> 
       <div class="black_container"> 
        <br/> 
       </div> 
       <div class="red_container"> 
        <br/> 
       </div> 
      </div> 
     </div> 

CSS：

.container { 
    overflow: hidden; 
    padding: 0px; 
    margin: 0px auto; 
    width: 90%; 
    background-color: white; 
    border-radius: 10px; 
    box-shadow: 0px 0px 6px 0px #ccc; 
} 

.blue_container { 
    background-color: blue; 
    display: inline-block; 
    width: 20%; 
} 

.black_container { 
    width:60%; 
    display:inline-block; 
    background-color: black; 

} 

.red_container { 
    width: 20%; 
    display:inline-block; 
    background-color: red; 

} 

.fixed_conatiner { 
     float:left; 
     background-color: yellow; 
     width: 60px; 
} 

.transparent_container[type="fixed"] { 
    padding:0px; 
    margin:0px; 
    width: 60px; 

} 

.transparent_container_2{ 
    padding-left: 60px; 
    word-spacing: -1em; 
} 

.transparent_container[type="avazmishe"] { 
    padding:0px; 
    margin:0px; 
}