首先利用移動設備重新排列CSS的列

如果我打算使用純HTML和CSS來實現下圖所示的結果，我該如何解決？首先利用移動設備重新排列CSS的列

Rearranged css columns

我需要重新安排了大屏幕的堆疊元素，我已經試過：

#2: float: left 
#1: display: inline-block 
#3: float: right

，但沒有做的伎倆。任何人都可以將我指向正確的方向？

來源

2017-08-27 InfinityStream

你罰款@media查詢？你的圖像說> 300px，所以它們可以適合... –

我不知道確切的答案，但CSS網格可以做到這一點。看起來很複雜，但在15分鐘的教程後，你應該能夠做到這一點。 –

要獲得最簡單最新的結果，並且要利用最新的技術和趨勢 - 請使用flexbox。具體來說，請按照implementation of the Holy Grail with flexbox。例如 - 展開下方片斷，運行它，並調整窗口大小：

.HolyGrail { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 

 
.HolyGrail-body { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.HolyGrail-content { 
 
    background-color:orange; 
 
    order:1; 
 
} 
 

 
.HolyGrail-content, .HolyGrail-ads { 
 
    /* 12em is the width of the columns */ 
 
    flex: 0 0 300px; 
 
} 
 

 
.HolyGrail-nav { 
 
    /* put the nav on the left */ 
 
    flex:1; 
 
    order: -1; 
 
    background-color:green; 
 
} 
 
.HolyGrail-ads { 
 
    background-color:red; 
 
    order:3; 
 
} 
 
.HolyGrail, 
 
.HolyGrail-body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .HolyGrail-body { 
 
    flex-direction: row; 
 
    flex: 1; 
 
    } 
 
    .HolyGrail-content { 
 
    flex: 1; 
 
    } 
 
    .HolyGrail-content, .HolyGrail-ads { 
 
    /* 12em is the width of the columns */ 
 
    flex: 0 0 300px; 
 
    } 
 
    .HolyGrail-nav { 
 
    order:2; 
 
    } 
 
}

<body class="HolyGrail"> 
 
    <div class="HolyGrail-body"> 
 
    <main class="HolyGrail-content">…</main> 
 
    <nav class="HolyGrail-nav">…</nav> 
 
    <aside class="HolyGrail-ads">…</aside> 
 
    </div> 
 
    <footer>…</footer> 
 
</body>

來源

2017-08-27 23:28:22 Aydin4ik

儘管答案總是值得讚賞，但請在回答本身中[**總結您的鏈接的要點**]（http://meta.stackexchange.com/a/8259）。頁面的鏈接可能會在未來破解**（https://en.wikipedia.org/wiki/Link_rot），這可能會降低您的答案。事實上，僅僅是一個鏈接[**的答案可能被刪除**]（http://stackoverflow.com/help/deleted-answers）。包含鏈接關鍵點的幾句話或一些示例代碼將使您的答案保持健全，即使鏈接不再有效:) –

flexbox在舊瀏覽器中的地位如何？對我來說，瀏覽器的兼容性至關重要有沒有舊的瀏覽器的回退解決方案，或者如果我想要瀏覽器兼容性，我將如何解決這個問題？ – InfinityStream

http://caniuse.com/#search=flex我在這裏看到的只是綠燈。小心IE錯誤，他們列在「已知問題」部分。 – Aydin4ik

首先利用移動設備重新排列CSS的列

回答

相關問題