CSS伸展到可用寬度

如何製作塊級元素，例如div伸展到可用寬度？CSS伸展到可用寬度

我知道這可能看起來像一個明顯的答案的問題，但它是一個稍微有點複雜，它似乎，看看這個小提琴：

http://jsfiddle.net/spryno724/pZKgv/

的CSS設置一個包含div的左右邊距爲每邊20％。設置width屬性會導致它將可用空間的100％拉伸到原來的可用空間，導致在向每邊添加20％的邊距時，它會溢出屏幕一側。

如何解決這個問題，使20％的利潤率仍然存在，但div伸展以填補之間的剩餘空間？

來源

2012-03-10 Oliver Spryn

使div寬度爲60％？ – dave 2012-03-10 00:20:10

戴夫，這應該是一個答案，而不是評論。 – 2012-03-10 00:21:03

嗯...... *頭暈的感覺*是的。我不知道爲什麼我沒有想到這個？謝謝戴夫。 – 2012-03-10 00:21:42

這是你有什麼：

.error { 
    border: 1px solid black; 
    display: inline-block; 
    margin-left: 20%; 
    margin-right: 20%; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
}

試試這個：

.error { 
    border: 1px solid black; 
    margin-left: 20%; 
    margin-right: 20%; 
    top: 0px; 
}

來源

2012-03-10 00:23:07

是的，這有效，但我確實需要「固定」屬性，雖然... – 2012-03-10 00:24:34

這取決於你想要做什麼...你需要修復，如果你想定位你的div相對於瀏覽器窗口...（ http://www.w3schools.com/cssref/pr_class_position.asp） – 2012-03-10 00:26:40

是的，我確實希望它相對於瀏覽器窗口是固定的 – 2012-03-10 00:42:42

我看到你所提到的修復要對這個預留（寬度設置爲60％），最徹底的方法將該錯誤div放入容器中，然後將position:fixed屬性添加到該容器中。這樣，您可以設置錯誤消息的樣式，而不必擔心定位元素本身可能引起的樣式問題（如流血的背景顏色，填充或溢出問題）。

HTML

<div class="fixed"> 
    <div class="error">Error!!!</div> 
</div>

CSS

.error { 
    border: 1px solid black; 
    margin-left: 20%; 
    margin-right: 20%; 
} 


.fixed { 
    position: fixed; 
    top: 0px; 
    left:0; 
    right:0; 
}

Demo

來源

2012-03-10 09:24:26

確保身體有0空白和邊距。

任何div裏面應該佔用每一個可用的空間位。

來源

2013-07-28 01:00:38 winsly

CSS伸展到可用寬度

回答

相關問題