CSS瀏覽器像素舍入/溢出隱藏的百分比

我試圖與CSS一個可伸縮的網格佈局和我已經跨過我發瘋2個問題來了，所以任何幫助是極大的讚賞CSS瀏覽器像素舍入/溢出隱藏的百分比

1）我有一個寬度設置爲100％（與溢出隱藏），所以它涵蓋了完整的瀏覽器窗口和div我想要放置，說5，一div divs寬度爲20％，但最後一個我想要它略寬（21％）。雖然我有隱藏在父容器上的溢出，但最後一個div被包裝在其他四個下面，而不是保留在同一行上。我知道這是因爲子div的總寬度超過了父div，但是這不會通過使用隱藏來防止？

2）我有的第二個問題與第一個有關。我有最後一個div例如21％，因爲如果爲了適應容器而將其保留到20％，在窗口大小調整上，頁面右端會出現一個小間隙。這僅發生在webkit瀏覽器上，因爲它們處理像素四捨五入。

我試圖找到一種方法來解決這個問題，目前爲止沒有運氣。我想要實現的是將多個div彼此相鄰，以覆蓋整個瀏覽器寬度，即使在調整大小時也會繼續這樣做。

我已經找到了解決方法，通過使用javascript來調整最後的div時調整大小結束，但必須有一個更正確的方式做到這一點，或只有CSS？

來源

2012-03-28 evkorres

但你已經設置margin和padding爲0，無邊框？ – 2012-03-28 19:51:50

邊距和填充0 /邊界在哪裏？到容器？我沒有保證金或填充無處設置 – evkorres 2012-03-28 19:55:29

您是否嘗試過css3媒體查詢重新調整大小？ – Connor 2012-03-28 19:57:54

我認爲使用margin-right:-1px;可能是最好的解決方案，基本上使圖像的佈局寬度20％，但其可見寬度仍然是21％的問題。

HTML

<div id="grid"> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="c"></div> 
    <div class="d"></div> 
    <div class="e"></div> 
</div>

CSS

#grid {width:100%;height:100px;} 
#grid > div {width:20%;height:100px;float:left;} 
#grid > div:last-child {width:21%;margin-right:-1%;} 
.a {background-color:#F00;} 
.b {background-color:#F33;} 
.c {background-color:#F66;} 
.d {background-color:#F99;} 
.e {background-color:#FBB;}

http://jsfiddle.net/ER7ML/1/

至於原因overflow:hidden;不工作，不中斷的頁面的佈局方式。你可以使用下面的解決方案，它說隱藏溢出內部股利有width:101%。不過，我認爲這個解決方案不會像以前的解決方案那麼好。

HTML

<div id="outer"> 
    <div id="grid"> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="c"></div> 
    <div class="d"></div> 
    <div class="e"></div> 
    </div> 
</div>

CSS

#outer {width:100%;height:100px;} 
#grid {width:101%;} 
#grid > div {width:20%;height:100px;float:left;} 
#grid > div:last-child {width:21%;} 
.a {background-color:#F00;} 
.b {background-color:#F33;} 
.c {background-color:#F66;} 
.d {background-color:#F99;} 
.e {background-color:#FBB;}

http://jsfiddle.net/yUPh7/1/

來源

2012-03-30 12:23:19

你可以嘗試這樣的事情。

CSS

body, html, div { 
    margin:0px; 
    padding:0px; 
} 

.main { 
    width:100%; 
    height:100px; 
    background-color:#000000; 
    position:relative; 
    overflow:hidden; 
} 

.col1, .col2, .col3, .col4, .col5 { 
    position:absolute; 
    top:0px; 
    width:20%; 
} 

.col1 { 
    left:0px; 
    background-color:#ff0000; 
} 

.col2 { 
    left:20%; 
    background-color:#ffcc00; 
} 

.col3 { 
    left:40%; 
    background-color:#00ff00; 
} 

.col4 { 
    left:60%; 
    background-color:#0000ff; 
} 

.col5 { 
    left:80%; 
    width:21%; 
    background-color:#cc00ff; 
}

HTML

<div class="main"> 
    <div class="col1">div 1</div> 
    <div class="col2">div 2</div> 
    <div class="col3">div 3</div> 
    <div class="col4">div 4</div> 
    <div class="col5">div 5</div> 
</div>

來源

2012-05-22 21:23:12 dlewis22

給最後一個元素的下列屬性將使其佔據容器的全部剩餘寬度：

#grid > *:last-child { 
    float: none; 
    overflow: hidden; 
    width: auto; 
}

這是一個簡化OOCSS網格框架的版本。一個完整的測試用例和鏈接可以在下面的演示：

http://codepen.io/barneycarroll/pen/cAykE

來源

2012-09-11 14:52:29 Barney

CSS瀏覽器像素舍入/溢出隱藏的百分比

回答

相關問題