流動佈局與某些固定寬度的列

我期待到整個響應式設計的東西，發現流體網格偉大的是 - 唯一的問題是，他們似乎打破，當我試圖給一個固定寬度的任何列。當你縮小屏幕時，列會從浮動中彈出。我曾預計有一個百分比寬度（或沒有寬度）的流體柱只是收縮，留下固定寬度的柱子。創建混合流體/固定網格有多容易？我已經看到了一種使用內聯塊而不是浮動塊的解決方案，但跨瀏覽器的效果如何，它是一種乾淨的做事方式？流動佈局與某些固定寬度的列

這裏的問題的一個例子：http://jsfiddle.net/andfinally/nJ97q/2/

謝謝！弗雷德

來源

2011-11-05 And Finally

您是否期望使用那個「hello world」或固定寬度的列作爲徽標等的佔位符？我已經通過使用媒體查詢解決了這個問題，但再次不支持所有媒體。 – Xavier

我應該解釋 - 「Hello world」列將包含最大的列 - 例如帖子的正文。其他兩列用於側欄內容。我打算使用媒體查詢，但我的目標是流暢的佈局，可以平滑調整大小，如果可以的話，要避免大小之間的跳躍。 –

將包裝div的最小寬度設置爲兩個固定列的最小寬度+下一列的最小寬度。這使它不會推動。

#row { min-width: 400px; }

有一點需要注意的是它不支持IE6及以下版本，並且可能在IE7中有問題。

--------- -------------編輯

什麼工作最適合你在這種情況下，我認爲將是一個顯示：表單元格建立。這將允許一切被鎖定到你正在尋找的位置。

.main { 
    padding: 10px; 
    background: #efefef; 
    display: table-cell; //this locks to #sideNav 
} 

#sideNav { 
    display: table-cell; //this wraps the sidebar and middle and locks to main 
    width: 280px; 
    verticle-align: top; 
} 

.middle { 
    display: table-cell; //this locks with .sidebar 
    width: 140px; 
    padding: 10px;  
    background: #bbb; 
} 

.sidebar { 
    display: table-cell; //this locks with .middle 
    width: 100px; 
    padding: 10px;  
    background: #555; 
}

http://jsfiddle.net/nJ97q/73/

來源

2011-11-05 15:45:41 CBRRacer

謝謝CBRRacer，這是一個合理的建議，這似乎是最好的解決方案難題。 –

Bah！這很好地工作，直到我把一些內容放入「Hello World」列。 http://jsfiddle.net/andfinally/nJ97q/我想回到繪圖板。 –

@AndFinally你正在尋找更好的顯示錶設置。如果甚至支持IE7，它也會出現問題。 – CBRRacer

我認爲解決的辦法之下或許可以幫助你。

因爲你給的百分比「行」的div寬度，它的每一個你縮小窗口時間來調整自己。如果可以的話，請以像素爲單位給它一個寬度，如果不能使用最小寬度，那麼它將不會重新縮小到最小寬度以下，因此面板將保持不變。

，使其順滑：您可以添加JavaScript來使其光滑。使用window.onresize事件來調用一個函數，該函數包含通過使用定時函數來緩慢調整「行」大小的代碼，該函數將「行」的寬度每10微秒增加10個像素左右直到最大長度，在這種情況下，長度已達到。但是，如果您以像素爲單位設置寬度，則可以有效地執行此操作，否則會產生難看的縮小和放大效果。

希望幫助，阿什溫

來源

2011-11-05 15:26:37

感謝Ashwin，有趣的想法，我會再看一次。 –

如果問題解決了，請不要忘記回答問題。 –

有這樣做的沒有乾淨的方式。但誰需要乾淨？

我不會reccomend混合固定和流體寬度，但如果你是，你可能需要媒體查詢（很多polyfills可用於IE）。然後你可以檢查容器是否小於X，在這種情況下，你可以重新排列布局（所有列的1/3或者垂直等）。

雖然這個例子有點奇怪。中間所有的空白處是什麼？內容是什麼？

PS。請勿使用min-width。這使整個響應無效。

來源

2011-11-05 15:30:46 Rudie

感謝Rudie，我仍然在學習......我打算在使用HTML5元素的時候進入真正的佈局。 –

我應該讓自己的例子更清晰，時間緊迫。「Hello World」專欄應該是主要內容專欄。 –

@AndFinally HTML5元素真的不是那麼重要。從字面上沒有人和沒有關心：http://coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/ – Rudie

我有地方，我需要有一個固定的寬度左欄（菜單結構）類似的問題，但有正確的列響應調整爲瀏覽器降低。

我最終實現了一些額外的媒體查詢（它們已經存在以處理其他邊緣情況）並查找適用於該媒體查詢的右列的百分比寬度。這確實會略微「跳躍」（我只在標準手持設備/平板電腦/桌面設備上使用了2個「額外」媒體查詢），但是在所有分辨率之間它都不會摔到下一行。實際上，您正在調整每個媒體查詢中的上下文，然後才能中斷。瀏覽器調整大小時，更多的媒體查詢會相當平穩。

我對跳轉沒問題，因爲我不是爲某人調整瀏覽器大小寫而建立的，而是爲了確保它可以在不同的分辨率設備上正常工作。

一個告誡，當計算出右列的百分比寬度時，使用的基本寬度是您所處媒體查詢的寬度，而不是原始的完整寬度。此外，您必須使用最小寬度，並使用每個媒體查詢部分的最小分辨率下工作的大小。

/* 641+ */ 
@media all and (min-width:641px) { 
    .itemDetailLanding { 
     width: 58.81435257410296%; /* 377/641 */ 
    } 
} 
/* 725-768 */ 
@media all and (min-width: 725px) { 
    .itemDetailLanding { 
     width: 63.44827586206897%; /* 460/725 */ 
    } 
} 
/* 769+ */ 
@media all and (min-width: 768px) { 
    .itemDetailLanding { 
     width: 65.625%; /* 504/768 */ 
    } 
} 
/* 860-990 */ 
@media all and (min-width: 860px) { 
    .itemDetailLanding { 
     width: 69.18604651162791%; /* 595/860 */ 
    } 
}  
/* 990+ */ 
@media all and (min-width:990px) { 
    .itemDetailLanding { 
     width: 74.04040404040404%; 
    } 
}

來源

2013-01-11 00:22:25 LocalPCGuy

我想知道爲什麼不使用表？

像：

<table class="row"> 
    <tr> 
     <td class="main"> 
     </td> 
     <td class="middle"> 
     </td> 
     <td class="sidebar"> 
     </td> 
    </tr> 
</table>

它成爲使用表格的佈局非常簡單，沒有JS，同一列的高度，用任何瀏覽器完全兼容。

這裏是例子：http://jsfiddle.net/nJ97q/162/

我知道大家都在說使用表是不好的做法，但它確實解決了所有這些問題。

來源

2013-07-31 12:42:36 Vedmant

流動佈局與某些固定寬度的列

回答

相關問題