CSS結合％和px寬度

我有一個寬度百分比的div。是否可以對齊其中的兩個div（左側和右側），以便左側div在px中定義寬度固定，以百分比爲右側的餘量，而其餘寬度則爲右側div。CSS結合％和px寬度

例如考慮這個問題：

<div class="box"> 

    <div class="left"> 

    </div> 

    <div class="right"> 

    </div> 
</div> 

.box{ 
    width:100%; 
    border:1px solid red; 
    overflow:hidden; 
} 


.left{ 
    float:left; 
    margin-right:5%; 
    width:100px;  
} 


.right{ 
    Problem.. 
}

這裏的jsfiddle鏈接：http://jsfiddle.net/s8Gwb/1/

來源

2012-06-18 user1355300

你不應該混合絕對和相對值，因爲這是很難甚至不可能計算出正確的頁邊距或CSS位置值只要。

calc()尚未在任何瀏覽器中實現，並且是「存在風險並且可能在CR期間」期間被丟棄。

如果你仍然想實現這樣的事情，你應該考慮以下幾點：

<div class="box"> 
    <div class="left">left content</div> 
    <div class="right-wrapper">  
     <div class="right">right content</div> 
    </div>  
</div>

.left{ 
    float:left; 
    width: 100px; 
} 
.right-wrapper{ 
    margin-left:100px; 
} 
.right{ 
    margin-left: 5%; 
}

JSFiddle Demo

來源

2012-06-18 18:36:36 Zeta

這工作就像一個魅力。謝謝！ – cnp

.box{ 
    width:100%; 
    border:1px solid red; 
    overflow:hidden; 
} 


.left{ 
    float:left; 
    margin-right:5%; 
    width:100px; 

} 


.right{ 
    float:right; 
    left:100px; //notice this same as width of div left 
    position:absolute;

} 希望這對你的作品。

來源

2012-06-18 18:42:02 vijay

添加更多的文本，並打破 - http://jsfiddle.net/s8Gwb/34/（看邊境） –

@Zoltan Toth這已經解決，看到這一個：http://jsfiddle.net/s8Gwb/28 / –

請看看這是你想要的效果：http://jsfiddle.net/s8Gwb/28/

我已經編輯你的CSS和去除浮動：從一.right層

來源

2012-06-18 18:44:23

也許放棄這個想法，使用絕對定位的div用浮動div有餘量。這你想要什麼？ http://jsfiddle.net/jefffabiny/s8Gwb/39/

來源

2012-06-18 18:49:47 smilebomb

CSS結合％和px寬度

回答

相關問題