3列布局在絕對定位div中失敗

恕我直言，以下是使用CSS的典型3列布局。沒有周圍的＃main-div，它看起來不錯。3列布局在絕對定位div中失敗

<html> 
<head> 
    <style type="text/css"> 
     #main { 
      position: absolute; 
      left: 100px; 
      top: 100px; 
      /* width: 400px; */ 
     } 
     .blue { 
      height: 30px; 
      background-color: blue; 
      float:right; 
     } 
     .green { 
      height: 30px; 
      background-color: green; 
     } 
     .red { 
      height: 30px; 
      background-color: red; 
      float: right; 
     } 
    </style>  
</head> 
<body> 
<div id="main"> 
    <div> 
     <div class="blue">RIGHT</div> 
     <div class="red">MIDDLE</div> 
     <div class="green">LEFT</div> 
    </div> 
    <div> 
     <div class="blue">RIGHT</div> 
     <div class="red">MIDDLE ####</div> 
     <div class="green">LEFT</div> 
    </div> 
    <div> 
     <div class="blue">RIGHT</div> 
     <div class="red">############### IN THE MIDDLE</div> 
     <div class="green">LEFT</div> 
    </div> 
</div> 
</body>

如果使窗口很小或者添加＃主-DIV最後的「左」滴出的佈局。我可以給它一個足夠的寬度，它可以再次運行，但是我問自己是否可以告訴瀏覽器讓中間列的寬度決定#main-div的寬度，以便第三個LEFT不是踢出來，整個div沒有超過必要的寬度？

我不想用JavaScript來計算這個... :(

來源

2012-01-23 user414873

** [的jsfiddle]（ http://jsfiddle.net/u743W/)**你真的想讓它看起來像一個樓梯嗎？ –

你爲什麼認爲你需要#main的絕對定位？ –

當它準備好時，它應該成爲一個右對齊的菜單，放在鼠標指針所在的位置，左右是固定的wid但我不能告訴中間的菜單項文字，所以它會有一個粗糙的邊緣（樓梯外觀）。當瀏覽器中不可見時，使用JavaScript獲取文本的寬度總是有點困難，所以如果我根本不需要處理它，那將是非常好的... – user414873

嘗試增加給你的樣式表：

.green {float:left;} 
div {height:30px;}

這是否幫助

來源

2012-01-28 16:26:43

爲每行添加一行高度是訣竅。謝謝。 – user414873

3列布局在絕對定位div中失敗

回答

相關問題