HTML/CSS向右移動問題

我正在嘗試創建一個具有三個子列的第二列的雙列設計。HTML/CSS向右移動問題

  <div class="section group green"> 
       <div class="col span_1_of_4"> 
        <div class="left">floatleft - </div> 
       </div> 
       <div class="col span_3_of_4"> 
        <div class="section group right"> 
         <div class="col span_1_of_3 "> 
          To be placed on extreme left 
         </div>  
         <div class="col span_1_of_3 "> 
          To be placed on center 
         </div>  
         <div class="col span_1_of_3 "> 
          extreme right 
         </div>  
        </div>  
       </div> 
      </div>

這裏是小提琴http://jsfiddle.net/CBZZU/3/embedded/result/

雖然對於第二列（COL span_3_of_4）具有寬度大於600px的包裝，每個內容是越來越向右結塊。即使句子不分大小，也可以分成多行。

如何避免內容越來越成羣向右？他們應該被放置在右側，但應該佔據整個空間，而不是換行

來源

2014-04-29 Mic

你的命名很混亂。你希望每一個在他們受尊敬的雙方？但你給他們所有的左css課？ – DWolf

@D狼：對不起我的錯誤。我編輯它並刪除了錯誤的命名。 – Mic

是否這樣？ http://jsfiddle.net/CBZZU/5/

HTML：

<div class="section group green"> 
    <div class="col span_1_of_4 left"> 
     <div>floatleft - </div> 
    </div> 
    <div class="col span_3_of_4 right"> 
     <div class="section group"> 
      <div class="col span_1_of_3 "> 
       To be placed on extreme left 
      </div>  
      <div class="col span_1_of_3 "> 
       To be placed on center 
      </div>  
      <div class="col span_1_of_3 "> 
       extreme right 
      </div>  
     </div>  
    </div> 
</div>

CSS：

.green { 
    background:green; 
} 
.left { 
    float:left; 
    background:blue; 
} 
.right { 
    width:100%: 
    float:right; 
    background:red; 
}

來源

2014-04-29 17:56:20 theHarsh

的問題是你的div class="section group green"被收縮，因爲它漂浮到右。給它width: 100%將解決你的問題。

來源

2014-04-29 17:54:28 ozantunca

謝謝你的朋友。這解決了這個問題。 – Mic

添加width: 100%要麼.group或.section。

來源

2014-04-29 17:56:40

HTML/CSS向右移動問題

回答

相關問題