如何使浮動div動態擴展以佔用最大空間？

我有3個漂浮的左側物體，左側的物體總是會隨時變化。這個權利總是會被固定的。中心之一，我想填補兩個外部divs之間的空間。現在，這不工作。如果我將中心div的寬度設置爲100％，它會變得太大。如何使浮動div動態擴展以佔用最大空間？

不知道這應該如何處理。

編輯：代碼示例

<div style="width:1000px"> 
    <div style="float:left;">1</div> 
    <div style="float:left;">Lots of text in here that can be any size....</div> 
    <div style="float:left; width:100px;">Date/Time</div> 
</div>

第一格的大小是動態的。如果數字是10，它將佔用比數字1更多的空間。第二個div也是動態的，我希望它佔用第一個和第三個div所佔用的空間。

來源

2011-05-30 John Baker

請使用示例代碼。 – Niklas 2011-05-30 18:43:01

HTML

<div style="width:1000px"> 
    <div id="left">1</div> 
    <div id="right">Date/Time</div> 
    <div id="center">Lots of text in here that can be any size....</div> 
</div>

CSS

#left { 
    float: left; 
    width: 20%; 
} 

#center { 
    margin-left: 20%; 
    margin-right: 100px; 
} 

#right { 
    float: right; 
    width: 100px; 
}

見fiddle。

來源

2011-05-30 18:54:07 melhosseiny

在這種情況下，看起來好像沒有實際的保證金，至少你把我鏈接到的小提琴沒有保證金 – 2011-05-30 18:57:16

它怎麼不起作用？ – melhosseiny 2011-05-30 19:01:26

如果它在工作，那麼這兩種顏色之間會有一個空間嗎？在你發送的小提琴中，我看到每個元素相鄰，就好像它在一張桌子上一樣。 – 2011-05-30 19:14:50

試試這個：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>How do I make a floating div dynamically expand to take up maximum space?</title> 
    <style type="text/css"> 
    #left { 
     float:left; 
     border:1px solid red; 
    } 
    #right { 
     float:right; 
     border:1px solid green; 
     width:100px; 
    } 
    #center { 
     overflow-x:hidden; 
     border:1px solid blue; 
    } 
    </style> 
</head> 
<body> 

<h1>How do I make a floating div dynamically expand to take up maximum space?</h1> 

    <div id="left"> 
    Un-fixed width left, whose content may change. 
    </div> 
    <div id="right"> 
    Fixed WIdth Right column which shouldn't expand. 
    </div> 
    <div id="center"> 
    The center content<br />Which should expand as necessary 
    </div> 

</body> 
</html>

來源

2011-05-30 18:50:14

您很可能早就發現了這一點，但對於下一個傢伙，您現在可以使用CSS3 flexbox來做到這一點。（W3c's newest specification，Mozilla documentation，css-tricks）

HTML

<div class="flex-container"> 
    <div>1</div> 
    <div class="expandable">Lots of text in here</div> 
    <div style="float:left; width:100px;">Date/Time</div> 
</div>

CSS

.flex-container { 
    display: flex; 
    width: 1000px; 
    border: 1px solid black; 
} 
.expandable { 
    flex: 100 100; 
    text-align: center; 
}

這裏是jsfiddle。

來源

2015-04-23 12:16:49 slushy

如何使浮動div動態擴展以佔用最大空間？

回答

相關問題