3列布局 - 無列

當源列順序從列到列跳轉時，如何在CSS中編碼三列布局？3列布局 - 無列

該頁面有七個部分 -顯示了所需的源順序如何與佈局進行比較。號碼是因爲其在源訂單中的位置，而文本是它應該出現在頁面上的位置。

jsfiddle screen cap in chrome

正如你所看到的，基本上有三列三行，但第二行中的元素不應該頂部對齊，第二行不應該清除第一排。每個部分應該與位於其上方的部分的底部齊平。

注：

源順序一致的順序的元素需要在移動設備上，不幸的是不能改變
我也沒有重複的選項然後基於視口寬度顯示/隱藏它們
不幸的是絕對定位不是一個選項，因爲佈局m烏斯適應任何視寬320像素和高達

我已經嘗試了一些知名的CSS佈局技術和上面的小提琴展示了最成功的嘗試 - 這裏是用於「頂行的代碼「：

.top-center { 
    float: left; 
    width: 55%; 
    margin-left: 25%; 
} 

.top-left { 
    float: left; 
    width: 25%; 
    margin-left: -80%; 
} 

.top-right { 
    float: right; 
    width: 20%; 
}

下面是我遇到的問題：

IE 9/10是一塌糊塗（見下文）
在Chrome中，「Middle Right」div總是清除「左上角」div，阻止它位於「右上角」下方。另外，如果「右上角」div太高，則與「中右」重疊。
在Firefox中，第二個「行」頂部對齊，重疊第一行的左側和右側部分。

這裏是什麼樣子的IE10：

jsfiddle screen cap in IE10

這裏，它是在Firefox：

jsfiddle screen cap in Firefox

來源

2013-07-05 cantera

請問，如果你有<！DOCTYPE HTML！>在你的html文檔的頂部。有時可以在IE中修復它。 – user2067005

如果你有這樣的佈局要求，爲什麼不改變輸出源的順序，或考慮使用絕對定位？ –

Mike - 源訂單與元素需要在移動設備上顯示的訂單相匹配，但不幸無法更改。我加入這個記下問題，謝謝你提醒我 – cantera

如果定位是重要的，你不能控制HTML代碼的順序（我假設從閱讀你的問題開始），我寧願去擁有一些可用的abso用琵琶定位CSS和使用JavaScript（它給你更多的自由來選擇您需要的佈局最好的算法改進它（onDomReady），但仍然可用但不完美佈局那些少數反JavaScript的球員，有）。

然而，很難說沒有看到實際的標記和要求。

來源

2013-07-05 20:16:12 peterp

謝謝，這是有用的信息，如果我最終不得不解決與javascript的佈局 – cantera

如果絕對定位絕對不是一個選擇，你需要計算前的頁面生成元素的高度，並把每塊爲基礎的高度正確的列。相信我，絕對定位要容易得多！

你可能會想是Masonry。它會根據您的需要爲您設置列。它的確依賴於絕對定位，但這只是你唯一的簡單選擇。您需要稍微修改一下代碼以使其具有響應性，我在一個開發中的網站here上完成了這項工作，但我無法完全記住我所做的，對不起。儘管通過源代碼可以自由瀏覽。

砌體是相當快;以下是基本設置，here are more details。

HTML

<div id="container"> 
    <div class="item">...</div> 
    <div class="item w2">...</div> 
    <div class="item">...</div> 
    ... 
</div>

的JavaScript

var container = document.querySelector('#container'); 
var msnry = new Masonry(container, { 
    // options 
    columnWidth: 200, 
    itemSelector: '.item' 
});

來源

2013-07-05 20:38:45 DACrosby

感謝您的答覆 - 我會保持砌體的情況下，以防萬一我無法使用CSS自己的工作 – cantera

@ cantera25 CS3列可能也值得關注。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts – DACrosby

就像砌體是答案。答案將涉及JavaScript。 CSS可視化格式模型的侷限性是，您無法根據需要使用您擁有的標記獲取三列布局。 –

我設法與只CSS佈局如下：http://jsfiddle.net/hpr2b/7/

.top-center { 
    width: 55%; 
    float: left; 
    margin: 10px 0 10px 25%; 
} 

.top-left { 
    float: right; 
    width: 25%; 
    margin: 10px 75% 40px -100%; 
} 

.top-right { 
    float: right; 
    width: 20%; 
    margin: 10px 0 40px 0; 
} 

.mid-center { 
    margin: 10px 20% 10px 25%; 
    clear: left; 
} 

.mid-left { 
    float: left; 
    clear: right; 
    width: 25%; 
    margin-top: -20px; 
} 

.mid-right { 
    float: right; 
    clear: right; 
    width: 20%; 
    margin-top: -20px; 
} 

.bottom-center { 
    margin: 0 20% 10px 25%; 
}

來源

2013-07-05 21:22:52

3列布局 - 無列

回答

相關問題