網(wǎng)頁(yè)設(shè)計(jì) 兩欄布局或者是三欄布局，css+div在定位方面的使用？

時(shí)間：2024-02-08 02:25:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-08 02:25:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)設(shè)計(jì) 兩欄布局或者是三欄布局，css+div在定位方面的使用？：

一個(gè)挑戰(zhàn)

假設(shè)您需要?jiǎng)?chuàng)建一個(gè)兩列布局。是的，最簡(jiǎn)單的那種：左邊一列，右邊一列，中間有一些空隙。有一個(gè)明顯的現(xiàn)代解決方案：

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}完畢！當(dāng)然可以，但是如果我們需要支持一些較舊的瀏覽器怎么辦？然后是 Flexbox。好的！那么文本從一欄流到另一欄呢？沒(méi)問(wèn)題，多列。舊的電子郵件客戶端怎么樣？好吧，我們中的一些人仍然記得如何使用表格布局。

你看，這就是 CSS 的美妙之處：幾乎每個(gè)問(wèn)題都有多種解決方案，因此，您可以選擇適合您的確切需求的解決方案。但不僅僅是 CSS，還有許多 HTML 和 SVG 技巧在某些情況下可以為您提供幫助。它就像一種自然語(yǔ)言：你的詞匯量越大，你就越能表達(dá)自己。

甚至還有一個(gè)基于此的面試策略：你可以要求人才想出多種方法來(lái)解決同一個(gè)簡(jiǎn)單的任務(wù)。而這正是本文的想法來(lái)源。

我的一個(gè)朋友曾經(jīng)用求職面試的任務(wù)來(lái)挑戰(zhàn)我：你知道多少種制作雙欄布局的方法？多么愚蠢的問(wèn)題，對(duì)吧？但這讓我比我想象的更深入。有一陣子我什么也想不起來(lái)，直到我在腦海中仔細(xì)考慮了所有可能和不可能的想法。它歸結(jié)為 11 種制作帶有間隙的兩列的方法。

但我更愿意稱他們?yōu)?6+5，將他們分為兩組：

• 六個(gè)非常合理的，它們有意義并且可以用于實(shí)際的生產(chǎn)項(xiàng)目（或用于）。
• 五個(gè)完全錯(cuò)誤的，有一些怪癖，看起來(lái)或行為很奇怪，但仍然完成了任務(wù)。

順便說(shuō)一句，在所有現(xiàn)代瀏覽器中，結(jié)果看起來(lái)都一樣，即使是五個(gè)奇怪的瀏覽器。

設(shè)置和規(guī)則

為了讓它更接近現(xiàn)實(shí)，我決定將整個(gè)事情分成兩個(gè)部分：

列：固定布局，有兩列和一個(gè)間隙。

新聞：適合專欄的流動(dòng)卡片。

這個(gè)想法是有一個(gè)可以填充真實(shí)內(nèi)容的列組件，而不僅僅是繪制兩個(gè)彼此相鄰的彩色框。

新聞組件將始終保持不變，我們將只使用欄目組件。第一個(gè)新聞將有一個(gè)淺綠色的背景，第二個(gè) - 著名的桃花心。

合理六

您將如何對(duì)合理選項(xiàng)列表進(jìn)行排序？好吧，可能不是按字母順序排列的。從最好到最壞？他們都擅長(zhǎng)某些情況，并具有一些獨(dú)特的優(yōu)勢(shì)。所以我決定按照歷史的順序：我先從我學(xué)過(guò)的開(kāi)始，到現(xiàn)代的結(jié)束。

table

?? 演示：兩列和一個(gè)表格間隙

表格是瀏覽器中第一個(gè)可用的布局工具。早在 2002 年，我就用它們創(chuàng)建了我的第一個(gè)網(wǎng)頁(yè)。要制作表格布局，您需要一個(gè)父包裝器 <table>、一些 <tr> 行和用于列的 <td> 單元格。

<table class="columns"><tr> <td class="columns__item columns__item--first"> <!-- Left --> </td> <td class="columns__item columns__item--second"> <!-- Right --> </td></tr></table>我將對(duì)類名使用 BEM 表示法，就像我在真實(shí)項(xiàng)目中所做的那樣。我們將為所有演示使用幾乎相同的列組件結(jié)構(gòu)，但在某些情況下，我們不需要第一/第二修飾符。

值得注意的是，盡管表格被列在“合理”組中，但它們已經(jīng)過(guò)時(shí)了，應(yīng)該只用于……你知道的，表格和表格數(shù)據(jù)。您可能有理由將它們用于電子郵件布局，但我什至不確定是否還需要它們。從可訪問(wèn)性的角度來(lái)看，這是一場(chǎng)噩夢(mèng)，所以讓我們把它當(dāng)作一堂歷史課。

為了使表格消失并表現(xiàn)得像一個(gè)中性列組件，我們需要修復(fù)一些東西：border-collapse 和 padding 屬性以刪除額外的填充和 vertical-align: top 以將內(nèi)容對(duì)齊到頂部。是的，表格曾經(jīng)是垂直對(duì)齊事物的最簡(jiǎn)單方法。

.columns { border-collapse: collapse;}.columns__item { padding: 0; width: 50%; vertical-align: top;}為了在 2002 年留下一個(gè)空白，我會(huì)在中間使用另一個(gè)空單元格和一些額外的元素來(lái)固定寬度。瘋狂的時(shí)代！但今天我更喜歡一些填充：左邊 10px，右邊 10px，不要太花哨。

.columns__item--first { padding-right: 10px;}.columns__item--second { padding-left: 10px;}您可能認(rèn)為在 <div> 上使用 display: table 可以被視為制作兩列布局的另一種方式。但我認(rèn)為表格就是表格，這種行為是來(lái)自瀏覽器還是作者風(fēng)格并不重要。

news來(lái)了：

<article class="news"> <h2 class="news__title">Title</h2> <p class="news__lead">Content</p></article>一旦我們?cè)诿總€(gè)表格單元格中都有兩個(gè)新聞，第一個(gè)“合理”的布局就準(zhǔn)備好了。還有十個(gè)去！

Floats

?? 演示：兩列和一個(gè)帶浮動(dòng)的間隙

我學(xué)到的下一個(gè)布局技術(shù)是浮動(dòng)。它們是為類似報(bào)紙或雜志的內(nèi)容布局而發(fā)明的，在這些布局中，文本會(huì)“漂浮”在圖片、引語(yǔ)或類似元素周圍。我首先在 Adobe PageMaker 中嘗試了這一點(diǎn)，當(dāng)時(shí)我正在布置一份實(shí)際的報(bào)紙，而且在 Web 上也可以使用浮動(dòng)效果非常好。

一些聰明的人意識(shí)到，如果你去掉文本，將一個(gè)框向左浮動(dòng)，另一個(gè)向右浮動(dòng)，這樣就形成了一個(gè)布局！盡管確保浮動(dòng)元素不會(huì)爭(zhēng)奪空間很重要，否則它們會(huì)開(kāi)始從行中掉落。

在這種情況下，我們不需要任何特殊的 HTML 元素來(lái)使其工作，所以讓我們堅(jiān)持使用抽象 div。畢竟，這只是一個(gè)布局。

<div class="columns"> <div class="columns__item columns__item--first"> <!-- Left --> </div> <div class="columns__item columns__item--second"> <!-- Right --> </div></div>這是浮動(dòng)的主要問(wèn)題：它們需要被“清除”。如果您的容器中有浮動(dòng)元素，它們會(huì)掉出容器并且容器會(huì)折疊到零高度。

清除浮點(diǎn)數(shù)主要有兩種方式：

更改容器的某些屬性。

在容器的末尾放置一些虛假內(nèi)容。

讓我們選擇第一個(gè)選項(xiàng)?；氐礁?dòng)布局時(shí)代，我們會(huì)使用 overflow: hidden，它有一個(gè)明顯的缺點(diǎn)：內(nèi)容被剪裁。但是今天我們可以使用一個(gè)特殊的顯示值：

.columns { display: flow-root;}我會(huì)稱它為 display: clear-floats，但這就是我沒(méi)有機(jī)會(huì)進(jìn)入 CSSWG 的原因。

現(xiàn)在我們需要設(shè)置列的寬度，因?yàn)樗鼈儾幌癖砀駟卧衲菢诱吃谝黄?，所以可以將它們分開(kāi)，寬度的一半減去間隙的一半。那時(shí)候 calc 的魔力還沒(méi)有，就像 border-radius 一樣，但現(xiàn)在是 2022 年，所以：

.columns__item { width: calc(50% - 10px);}最后，讓我們將它們浮動(dòng)到父對(duì)象的不同側(cè)面：

.columns__item--first { float: left;}.columns__item--second { float: right;}你有它！第二個(gè)稍微“合理”的雙列選項(xiàng)。讓我們?cè)囋囅乱粋€(gè)！

2、內(nèi)聯(lián)塊

?? 演示：兩列和一個(gè)內(nèi)聯(lián)塊的間隙

基于內(nèi)聯(lián)塊的布局大約與浮動(dòng)同時(shí)流行。但他們對(duì)付起來(lái)有點(diǎn)挑剔。我們將使用與浮動(dòng)相同的標(biāo)記，但我們不需要任何第一/第二修飾符。

首先，我們需要從我們的列中創(chuàng)建內(nèi)聯(lián)塊以使整個(gè)事情正常進(jìn)行。因?yàn)樗鼈兪莾?nèi)聯(lián)的，所以很樂(lè)意保持“內(nèi)聯(lián)”，但它們也是塊，您仍然可以設(shè)置它們的寬度（與內(nèi)聯(lián)元素不同）。讓我們也將它們對(duì)齊到頂部，而不是默認(rèn)基線。

.columns__item { display: inline-block; width: calc(50% - 10px); vertical-align: top;}現(xiàn)在我們的news塊在“欄目”中，但它們之間的差距看起來(lái)不對(duì)。它看起來(lái)像一個(gè)典型的白色空間。

好吧，因?yàn)樗?！我?HTML 中的所有嵌套都被瀏覽器例行壓縮到一個(gè)空白區(qū)域，因?yàn)樗且粋€(gè)內(nèi)聯(lián)上下文。

有兩種流行的方法可以擺脫它：

• 將父項(xiàng)的字體大小設(shè)置為零。
• 刪除標(biāo)記中標(biāo)簽之間的所有空格。

第二種方式相當(dāng)脆弱，所以讓我們使用第一種方式。由于 font-size 是一個(gè)繼承屬性，我們不要忘記為內(nèi)容恢復(fù)它。

.columns { font-size: 0;}.columns__item { font-size: 16px;}一旦我們的兩個(gè)列都緊挨著放置，我們就可以在它們之間精確地留出 20px 的間距。由于它是內(nèi)聯(lián)上下文，我們可以將我們的父元素視為一個(gè)句子，這使得嵌套列成為單詞……你看到它的去向了嗎？那就對(duì)了！word-spacing 屬性可以解決問(wèn)題。

.columns { word-spacing: 20px; font-size: 0;}.columns__item { word-spacing: normal; font-size: 16px;}我們不要忘記將嵌套元素重置為正常，就像我們對(duì)字體大小所做的那樣。

那是第三種方式，接下來(lái)的三種方式終于開(kāi)始有意義了，我保證。

3、多列

?? 演示：兩列和多列的間隙

現(xiàn)在是第一個(gè)為布局設(shè)計(jì)的布局技術(shù)的時(shí)候了。嗯，差不多。多列可以獲取任何內(nèi)容并使其在列之間流動(dòng)，并在其間留有一些原生間隙。正如在報(bào)紙上看到的那樣！

.columns { columns: 2 20px;}而已！我不是像 flex 這樣神奇的速記屬性的忠實(shí)粉絲，但我就是無(wú)法抗拒。在一個(gè)屬性中設(shè)置了兩列和一個(gè) 20 像素的間距！是不是很優(yōu)雅？但是有一點(diǎn)不對(duì)勁：

由于內(nèi)容從一欄流向另一欄，因此一些塊部分也在流動(dòng)。它看起來(lái)像一個(gè)破損的門戶或一臺(tái)舊電視，但有一個(gè)簡(jiǎn)單的解決辦法：禮貌地避免對(duì)殘酷的闖入財(cái)產(chǎn)的價(jià)值。

.columns__item { break-inside: avoid;}那很快！第四種雙列布局。讓我們看看是否有比這更好的東西。

4、彈性盒

?? 演示：兩列和一個(gè) Flexbox 間隙

現(xiàn)在最流行的布局技術(shù)來(lái)了。它已經(jīng)存在了一段時(shí)間，但在過(guò)去，瀏覽器實(shí)現(xiàn)存在差異，并且只是明顯的錯(cuò)誤使得 Flexbox 難以使用。但現(xiàn)在不是了！

現(xiàn)在很簡(jiǎn)單：

.columns { display: flex; gap: 20px;}.columns__item { width: 50%;}但是，如果您不能只支持最近的瀏覽器版本，那么您將不得不告別 gap 屬性并使用一些額外的代碼在列之間留出一些空間。將列推到兩側(cè)并確保它們的寬度像我們之前所做的那樣使用 calc 設(shè)置。

.columns { display: flex; justify-content: space-between;}.columns__item { width: calc(50% - 10px);}最后，一些現(xiàn)代且可用的東西，已經(jīng)是第五個(gè)了！與我們討論過(guò)的許多技術(shù)不同，F(xiàn)lexbox 在今天很重要。但這些天我經(jīng)常尋求下一個(gè)選擇。

5、網(wǎng)格布局

?? 演示：兩列和網(wǎng)格布局的間隙

說(shuō)真的，網(wǎng)格布局在幾乎所有布局情況下都非常有意義，即使對(duì)于像在單詞旁邊放置一個(gè)圖標(biāo)這樣的微布局也是如此。記??？這就是我們的出發(fā)點(diǎn)：

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}它的美妙之處在于整個(gè)布局由容器定義。當(dāng)然，在某些情況下，您需要將一些屬性應(yīng)用于嵌套元素，但可以僅使用容器的屬性來(lái)實(shí)現(xiàn)基本布局。它對(duì)于使您的布局響應(yīng)媒體查詢特別有用。

此外，由于 grid-gap 和后來(lái)的 gap 屬性是初始網(wǎng)格布局實(shí)現(xiàn)的一部分，與 Flexbox 中的 gap 相比，您不必?fù)?dān)心瀏覽器兼容性。

制作兩列布局的第六種方法太簡(jiǎn)單了。別擔(dān)心，我們會(huì)遇到一些非常奇怪的事情。

怪五

這里沒(méi)有歷史順序。我只是試圖列出從最不奇怪到完全錯(cuò)誤的選項(xiàng)。又是什么問(wèn)題讓我把這些方法分成了一個(gè)特殊的組？

首先，他們并不總是能很好地處理內(nèi)容流。在 Web 上，我們使用的原則是下一個(gè)內(nèi)容塊將緊跟在前一個(gè)內(nèi)容塊之后，而不是在它上面。一旦前一個(gè)塊變小或變大，所有后續(xù)塊都會(huì)隨之上下移動(dòng)。

如果您曾經(jīng)手動(dòng)編寫(xiě)過(guò) SVG 文件，您可能知道我在說(shuō)什么。想象一下，如果每個(gè)塊都絕對(duì)定位在文檔的左上角。那將使我們的工作更加困難。對(duì)于 SVG 作為圖像格式來(lái)說(shuō)完全沒(méi)問(wèn)題，但對(duì)于內(nèi)容布局來(lái)說(shuō)是不可接受的。

其他方法使用額外的標(biāo)記使事情變得過(guò)于復(fù)雜，濫用某些 CSS 屬性，使其只能在單個(gè)瀏覽器中工作，或者損害內(nèi)容的可訪問(wèn)性。不過(guò)，讓我們一一探索它們以學(xué)習(xí)新知識(shí)，或者至少獲得一些樂(lè)趣。

定位

?? 演示：兩列和一個(gè)帶定位的間隙

定位不是最好的布局技術(shù)，因?yàn)樗茐牧藘?nèi)容流，而內(nèi)容流是 Web 的主要原則之一。但在某些情況下它仍然是一個(gè)有用的工具。與 SVG 中的形狀不同，我們不必每次都從文檔的左上角定位元素：幸運(yùn)的是，有一種嵌套定位的方法。

讓我們通過(guò) position: relative 將父組件保持在流程中。在這種情況下，嵌套列定位將從父組件開(kāi)始，即使它會(huì)像浮動(dòng)一樣折疊到零高度。不幸的是，沒(méi)有辦法“清除”定位元素。

.columns { position: relative;}.columns__item { position: absolute; top: 0; width: calc(50% - 10px);}由于絕對(duì)定位元素處于它們的平行世界中，它們往往以一種有趣的方式包含事物，所以讓我們用 calc 來(lái)限制它們的寬度。就像浮動(dòng)一樣，讓我們將列推到兩側(cè)，這樣它們就不會(huì)重疊。

.columns__item--first { left: 0;}.columns__item--second { right: 0;}嗯，這個(gè)演示有些不同！與之前的紫色演示不同，這個(gè)演示的頁(yè)面背景充滿了番茄色。那是因?yàn)橥怀鲞@個(gè)群體的性質(zhì)看起來(lái)稍微危險(xiǎn)一些。

所以你有它：第一個(gè)奇怪的方式。沒(méi)什么可怕的，對(duì)吧？當(dāng)然，我們只是在熱身。

書(shū)寫(xiě)方式

?? 演示：兩列和一個(gè)帶有書(shū)寫(xiě)模式的間隙

要了解下一個(gè)方法的工作原理，讓我們考慮一下這段文字：不是它的含義，而是它的形狀。我是用水平線寫(xiě)的，從上到下一條接一條。這種行為在許多語(yǔ)言中都很常見(jiàn)，并由 writing-mode 屬性控制。在本例中，它的值為 horizontal-tb，意思是“水平，從上到下”。

但在某些語(yǔ)言中，文本可以垂直列顯示，而不是水平行。這為我們提供了另外兩個(gè)書(shū)寫(xiě)模式值：vertical-rl 和 vertical-lr。值的第一部分相當(dāng)簡(jiǎn)單，第二部分取決于文本的方向：LTR 或 RTL。無(wú)論如何，在這種垂直模式下，新行從前一行向左或向右移動(dòng)。

知道了讓我們嘗試一個(gè)愚蠢的事情：將父塊的書(shū)寫(xiě)模式更改為垂直，這樣行就會(huì)變成列并從右邊開(kāi)始。

.columns { writing-mode: vertical-lr;}看，這已經(jīng)看起來(lái)像一個(gè)布局了！但有些事情需要修復(fù)才能使其可用。就像在 font-size: 0 的情況下，我們需要將列的 writing-mode 恢復(fù)到以前的狀態(tài)。當(dāng)我們這樣做的時(shí)候，讓我們?yōu)槲覀兊牧刑砑訉挾取?br>
.columns__item { width: 390px; writing-mode: horizontal-tb;}不幸的是，我們無(wú)法在 Flexbox 或 Grid 布局之外使用 gap 屬性。因此，讓我們使用古老的技巧：一列后跟另一列將獲得正確的邊距。

.columns__item + .columns__item { margin-left: 20px;}我可能應(yīng)該改用 .columns__item——第一個(gè)選擇器，但這太容易了。我在這里嘗試使用盡可能多的技巧！

希望你能在 font-size: 0 和 writing-mode: vertical-lr 情況下聞到同樣奇怪的東西：它們既脆弱又濫用了不適合布局的屬性。

仍然是第二個(gè)奇怪的雙列布局。準(zhǔn)備好再來(lái)一個(gè)了嗎？我們走吧！

SVG

?? 演示：兩列和一個(gè) SVG 間隙

我已經(jīng)提到 SVG 只是一種可以手動(dòng)編碼的圖形格式，但不符合我們的布局需求。對(duì)不起，我騙了你。你一開(kāi)始沒(méi)有準(zhǔn)備好接受真相。但是現(xiàn)在你已經(jīng)經(jīng)歷了很多奇怪的事情并且準(zhǔn)備好迎接任何事情。

讓我們從 CSS 開(kāi)始……然后馬上結(jié)束。這是我們唯一需要的樣式。

.columns { display: block; width: 100%; height: 100%;}你已經(jīng)可以看到這種方式對(duì)內(nèi)容流的友好程度不亞于絕對(duì)定位（一點(diǎn)也不）。至于 HTML，它看起來(lái)不會(huì)很漂亮：

<svg class="columns"> <foreignObject> <article class="news news--first"> <h2 class="news__title">Title</h2> <p class="news__lead">Content</p> </article> </foreignObject> <foreignObject> <article class="news news--second"> <h2 class="news__title">Title</h2> <p class="news__lead">Content</p> </article> </foreignObject></svg>好吧，它不完全是 HTML，而是帶有一些 HTML 的 SVG。盡管如此，在 HTML 文檔中。我不知道它是否合法，但它是完全有效的：

文件檢查完成。沒(méi)有錯(cuò)誤或警告顯示。

通常，除了類似命名的 <a> 和 <script> SVG 元素外，SVG 不允許您在其中包含一些任意的 HTML。但是，如果您使用 <foreignObject> 很好地詢問(wèn)，那就沒(méi)問(wèn)題了。

為了讓它工作，我們需要定位這些外部代理……抱歉，我的意思是使用表示屬性的外部對(duì)象。這在 SVG 中很常見(jiàn)也很方便，因?yàn)樗皇且环N圖形格式，還記得嗎？我們有 x/y 而不是左/上，其余的非常相似。

但是沒(méi)有簡(jiǎn)單的方法來(lái)制作 right: 0 替代品，所以我們也必須從左邊定位右邊的列。

<foreignObject x="0" y="0" width="390" height="100%"> <!-- Left --></foreignObject><foreignObject x="410" y="0" width="390" height="100%"> <!-- Right --></foreignObject>不幸的是，SVG 包裝的內(nèi)容無(wú)法像 HTML 元素那樣影響父元素的尺寸。所以我們必須自己設(shè)置它：在我們的例子中，它占據(jù)了整個(gè)頁(yè)面的高度。

這是第三個(gè)奇怪的雙列布局。讓我們探索一個(gè)稍微合理的第四個(gè)，以防萬(wàn)一。

元素

?? 演示：兩列和一個(gè)帶元素的間隙

在設(shè)置規(guī)則時(shí)，我提到我們正在嘗試在這里做一些實(shí)用的事情，而不僅僅是把兩個(gè)盒子畫(huà)在一起。但是有一種方法可以獲取一些真實(shí)的內(nèi)容并將其繪制為背景圖像。它不是 Canvas，它只適用于 Firefox，你不應(yīng)該使用它。聽(tīng)起來(lái)很令人興奮！

為了讓它工作，讓我們將列的大小調(diào)整為父寬度的一半減去間隙的一半，這是通常的做法。然后我們剪輯它們，使它們變得不可見(jiàn)，并通過(guò)定位將它們從流中移除。當(dāng)然，為什么不呢。

.columns__item { position: absolute; clip-path: inset(50%); width: calc(50% - 10px);}看，柱子還在那里，但它們是看不見(jiàn)的。讓我們把它們放回我們需要的地方！但是父級(jí)的高度現(xiàn)在折疊起來(lái)沒(méi)有任何內(nèi)容，讓我們用 height: 100% 來(lái)修復(fù)它。相對(duì)定位將保持這些列相對(duì)于父塊的大小和位置。

.columns { position: relative; height: 100%;}現(xiàn)在是施展魔法的時(shí)候了。僅對(duì)于此演示，我們?cè)跇?biāo)記中為每個(gè)新聞設(shè)置了 ID：news-first 和 news-second。我們可以使用這些 ID 使這些元素成為具有 -moz-element 函數(shù)的 background-image 屬性的來(lái)源。多虧了多個(gè)背景圖片，我們可以只使用一個(gè)元素。定位我們的元素：第一個(gè)到左上角，第二個(gè)到右上角。我們不需要重復(fù)。

.columns { background-image: -moz-element(#news-first), -moz-element(#news-second); background-position: left top, right top; background-repeat: no-repeat;}VS Code 的 CSS 語(yǔ)法認(rèn)為函數(shù)中的 ID 有問(wèn)題，但它有效！好吧，目前僅在 Firefox 中。正如我之前提到的，它還沒(méi)有準(zhǔn)備好用于任何生產(chǎn)代碼。雖然它不只是編造的，因?yàn)樗?CSS Images Module Level 4 草案的一部分。

我們希望在某個(gè)時(shí)候所有瀏覽器都支持此功能。它只在 Firefox 中存在了一段時(shí)間。但是再一次強(qiáng)調(diào)，用它來(lái)布置內(nèi)容在任何情況下都不是一個(gè)好主意。

第四種奇怪的布局方法與接下來(lái)的方法相比并沒(méi)有那么糟糕。我真誠(chéng)地提前道歉。

Frames

?? 演示：兩列和一個(gè)帶框架的間隙

演示地址：https://pepelsbey.dev/articles/two-columns/demos/frame.html

您可能知道 <iframe> 是什么，但您可能并沒(méi)有經(jīng)常使用 <frame> 元素。它通過(guò)為您提供另一個(gè)文檔的“窗口”來(lái)達(dá)到類似的目的。它們之間的主要區(qū)別是 <iframe> 是一個(gè)獨(dú)立的元素，而 <frame> 元素以稱為 <frameset> 的集合出現(xiàn)。這些框架集具有一些布局功能！

為了制作我們的目標(biāo)布局，我們需要一組中的三個(gè)框架：兩個(gè)用于列，一個(gè)在中間用于間隙。我們框架的確切寬度可以在 cols 屬性中指定?？倢挾瘸^(guò) 100% 并不重要，瀏覽器不會(huì)溢出集合，就像處理表格一樣。

<frameset cols="50%, 20, 50%" border="0"> <frame frameborder="0" src=""> <frame frameborder="0" src=""> <frame frameborder="0" src=""><frameset>與“i”代表“內(nèi)聯(lián)”的 <iframe> 元素不同，<frameset> 應(yīng)該占據(jù)整個(gè)窗口。不僅如此，它還應(yīng)該取代 <body> 元素。在包含其他元素的頁(yè)面上使用這種布局技術(shù)是不可能的。沒(méi)問(wèn)題！我們可以將它包裝在另一個(gè)內(nèi)聯(lián)框架中。

框架還需要外部文檔才能工作，因此您必須將 <frameset> 分離到 columns.html 中，并通過(guò) src 屬性將其鏈接到 <iframe> 中。您還需要將news分成 news-one.html 和 news-two.html 文件，并通過(guò) src 屬性鏈接它們。請(qǐng)記住，我提前為該方法道歉！

但是還有另一種方法可以讓它在沒(méi)有外部文件和嵌套文檔的情況下工作。好吧，有點(diǎn)。我們可以使用 data:uri 并將所有內(nèi)容嵌套在一個(gè)文檔中。但是我們應(yīng)該小心引號(hào)，你會(huì)明白為什么的。

讓我們從 <iframe> 的 CSS 開(kāi)始，沒(méi)什么特別的：

.columns { display: block; width: 100%; height: 100%; border: none;}標(biāo)記來(lái)了，這是最令人興奮的部分。我們?cè)?src 屬性中沒(méi)有文件的 URL，而是用特殊的 data:text/html 前綴讓瀏覽器知道它不是 URL，而是“文件”本身。

內(nèi)容以 <!DOCTYPE html> 開(kāi)頭以保持標(biāo)準(zhǔn)模式，然后跟隨字符集（以防萬(wàn)一）。我跳過(guò)了 <title> 元素，因?yàn)槲沂莻€(gè)壞人。請(qǐng)永遠(yuǎn)不要這樣做。

<iframe class="columns" src="data:text/html, <!DOCTYPE html> <meta charset='utf-8'> <frameset cols='50%,20,50%' border='0'> <frame frameborder='0' src='data:text/html,'> <frame frameborder='0' src='data:text/html,'> <frame frameborder='0' src='data:text/html,'> </frameset>"></iframe>現(xiàn)在我們?cè)?src 屬性中有三個(gè)帶有空文件的嵌套框架。我們要讓中間的那個(gè)空著，因?yàn)樗皇且粋€(gè)缺口。至于另外兩個(gè)，會(huì)有我們的新聞文件。我通常在我的標(biāo)記中使用雙引號(hào)，但我必須在嵌套文檔中切換為單引號(hào)才能使其正常工作。在下一個(gè)嵌套級(jí)別，我將完全停止使用它們。

因此，讓我們像處理 <frameset> 一樣獲取實(shí)際內(nèi)容：準(zhǔn)系統(tǒng) HTML 文檔、一些樣式和新聞。不幸的是，我無(wú)法讓 <link rel="stylesheet" href="news.css"> 工作，所以我不得不使用內(nèi)聯(lián)樣式。但我不會(huì)因?yàn)樵谌绱嘶靵y的標(biāo)記中放棄而責(zé)怪它。

<iframe class="columns" src="data:text/html, <!DOCTYPE html> <meta charset='utf-8'> <frameset cols='50%, 20, 50%' border='0'> <frame frameborder='0' src='data:text/html, <!DOCTYPE html> <meta charset=utf-8> <style> /* News styles */ </style> <article class=news> <h2 class=news__title>Title</h2> <p class=news__lead>Content</p> </article> '> </frameset>"></iframe>第二條news也是如此，唯一不同的是背景顏色和內(nèi)容。最讓我吃驚的是它可以在 Firefox、Chrome 和 Safari 中運(yùn)行，盡管 <frameset> 和 <frame> 元素已經(jīng)被棄用了很長(zhǎng)時(shí)間。

我唯一無(wú)法解決的問(wèn)題是 Safari 中的 <frameset> 背景顏色：由于某種原因，它是白色的，盡管它在其他瀏覽器中是透明的。這種行為在任何地方都沒(méi)有提及，即使在出于兼容性原因詳細(xì)描述 <frame> 和 <frameset> 行為的 HTML 規(guī)范中也是如此。

那是我想出的最后一個(gè)奇怪的雙列技術(shù)。實(shí)用嗎？一定不行！我建造它有很多樂(lè)趣嗎？確實(shí)。