在CSS中的動態和固定大小

我需要在同一個HTML行中有2個div：一個會保持相同的寬度，而另一個的大小會在最終用戶增加網頁後增加。在CSS中的動態和固定大小

所以我定義一個DIV和內部2周的div像這樣：

<div> 
    <div style="float:left" width="20px">first div</div> 
    <div style="float:left" width="100%">first div</div> 
</div>

但是這是行不通的！

如何在同一行中創建2個div，一個是固定大小，另一個是相對的？

來源

2011-03-07 Dejell

搜索「流體佈局」 – zzzzBov 2011-03-07 20:43:23

你有後一個額外的冒號「浮動：左：」 – Jake 2011-03-07 20:44:01

@Odelya是行寬度固定的嗎？ – 2011-03-07 20:44:12

我贏了嗎？

Live Demo

Live Demo #2（使用類和與此多個實例的支持）

HTML：

<div id="divHolder"> 
    <div id="div1">1</div> 
    <div id="div2">2</div> 
</div>

CSS：

#divHolder { 
    overflow: auto 
} 
#div1 { 
    float: left; 
    width: 20px; 
    background: #ccc 
} 
#div2 { 
    margin-left: 20px; 
    background: #888 
}

來源

2011-03-07 20:46:27 thirtydot

+1爲一個簡單的解決方案。我甚至沒想到＃div2也不一定是float：left。 – Moses 2011-03-07 21:13:29

+1爲清潔的解決方案，男人我得跳上CSS問題之前，或者我永遠不會打3K沒關係你正在朝着10K蒸！ – 2011-03-07 21:35:30

@Myles Gray：謝謝。我想我可能只是[完成]（http://stackoverflow.com/questions/5224885/scaling-an-image-with-a-div-whose-child-sets-the-height/5225718#5225718）到你再次，對不起：D – thirtydot 2011-03-07 21:54:31

看看這個：根據http://jsfiddle.net/Shaz/GaZYt/2/

左框會改變大小大的水平空間是如何離開。正確的方塊始終有一個200px的最小和最大寬度。

來源

2011-03-07 20:45:47 Shaz

紅框溢出視口。 – 2011-03-07 20:46:20

@Šime：這個問題應該解決，再試一次。 – Shaz 2011-03-07 20:48:51

我簡化了你的代碼：http://jsfiddle.net/simevidas/GaZYt/3/看來你並不需要大部分CSS屬性。 – 2011-03-07 20:54:10

嘗試設置顯示：在div元素上內聯。 div的默認顯示值是block（這會導致它們出現在單獨的行上）。這裏是一個例子js fiddle

來源

2011-03-07 20:46:18 DwB

我相信你可能需要使用Javascript來處理這種情況。

$(window).resize(function() { 
    var $left = $('#left'); 
    var $container = $('#container'); 
    $right.width($container - $left); 
});

來源

2011-03-07 20:47:21 picardo

在CSS中的動態和固定大小

回答

相關問題