时间:2024-02-08 02:25:02 | 来源:网站运营
时间:2024-02-08 02:25:02 来源:网站运营
网页设计 两栏布局或者是三栏布局,css+div在定位方面的使用?:.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
完毕!当然可以,但是如果我们需要支持一些较旧的浏览器怎么办?然后是 Flexbox。好的!那么文本从一栏流到另一栏呢?没问题,多列。旧的电子邮件客户端怎么样?好吧,我们中的一些人仍然记得如何使用表格布局。<table class="columns"><tr> <td class="columns__item columns__item--first"> <!-- Left --> </td> <td class="columns__item columns__item--second"> <!-- Right --> </td></tr></table>
我将对类名使用 BEM 表示法,就像我在真实项目中所做的那样。我们将为所有演示使用几乎相同的列组件结构,但在某些情况下,我们不需要第一/第二修饰符。.columns { border-collapse: collapse;}.columns__item { padding: 0; width: 50%; vertical-align: top;}
为了在 2002 年留下一个空白,我会在中间使用另一个空单元格和一些额外的元素来固定宽度。疯狂的时代!但今天我更喜欢一些填充:左边 10px,右边 10px,不要太花哨。.columns__item--first { padding-right: 10px;}.columns__item--second { padding-left: 10px;}
您可能认为在 <div> 上使用 display: table 可以被视为制作两列布局的另一种方式。但我认为表格就是表格,这种行为是来自浏览器还是作者风格并不重要。<article class="news"> <h2 class="news__title">Title</h2> <p class="news__lead">Content</p></article>
一旦我们在每个表格单元格中都有两个新闻,第一个“合理”的布局就准备好了。还有十个去!<div class="columns"> <div class="columns__item columns__item--first"> <!-- Left --> </div> <div class="columns__item columns__item--second"> <!-- Right --> </div></div>
这是浮动的主要问题:它们需要被“清除”。如果您的容器中有浮动元素,它们会掉出容器并且容器会折叠到零高度。.columns { display: flow-root;}
我会称它为 display: clear-floats,但这就是我没有机会进入 CSSWG 的原因。.columns__item { width: calc(50% - 10px);}
最后,让我们将它们浮动到父对象的不同侧面:.columns__item--first { float: left;}.columns__item--second { float: right;}
你有它!第二个稍微“合理”的双列选项。让我们试试下一个!.columns__item { display: inline-block; width: calc(50% - 10px); vertical-align: top;}
现在我们的news块在“栏目”中,但它们之间的差距看起来不对。它看起来像一个典型的白色空间。.columns { font-size: 0;}.columns__item { font-size: 16px;}
一旦我们的两个列都紧挨着放置,我们就可以在它们之间精确地留出 20px 的间距。由于它是内联上下文,我们可以将我们的父元素视为一个句子,这使得嵌套列成为单词……你看到它的去向了吗?那就对了!word-spacing 属性可以解决问题。.columns { word-spacing: 20px; font-size: 0;}.columns__item { word-spacing: normal; font-size: 16px;}
我们不要忘记将嵌套元素重置为正常,就像我们对字体大小所做的那样。.columns { columns: 2 20px;}
而已!我不是像 flex 这样神奇的速记属性的忠实粉丝,但我就是无法抗拒。在一个属性中设置了两列和一个 20 像素的间距!是不是很优雅?但是有一点不对劲:.columns__item { break-inside: avoid;}
那很快!第四种双列布局。让我们看看是否有比这更好的东西。.columns { display: flex; gap: 20px;}.columns__item { width: 50%;}
但是,如果您不能只支持最近的浏览器版本,那么您将不得不告别 gap 属性并使用一些额外的代码在列之间留出一些空间。将列推到两侧并确保它们的宽度像我们之前所做的那样使用 calc 设置。.columns { display: flex; justify-content: space-between;}.columns__item { width: calc(50% - 10px);}
最后,一些现代且可用的东西,已经是第五个了!与我们讨论过的许多技术不同,Flexbox 在今天很重要。但这些天我经常寻求下一个选择。.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
它的美妙之处在于整个布局由容器定义。当然,在某些情况下,您需要将一些属性应用于嵌套元素,但可以仅使用容器的属性来实现基本布局。它对于使您的布局响应媒体查询特别有用。.columns { position: relative;}.columns__item { position: absolute; top: 0; width: calc(50% - 10px);}
由于绝对定位元素处于它们的平行世界中,它们往往以一种有趣的方式包含事物,所以让我们用 calc 来限制它们的宽度。就像浮动一样,让我们将列推到两侧,这样它们就不会重叠。.columns__item--first { left: 0;}.columns__item--second { right: 0;}
嗯,这个演示有些不同!与之前的紫色演示不同,这个演示的页面背景充满了番茄色。那是因为突出这个群体的性质看起来稍微危险一些。.columns { writing-mode: vertical-lr;}
看,这已经看起来像一个布局了!但有些事情需要修复才能使其可用。就像在 font-size: 0 的情况下,我们需要将列的 writing-mode 恢复到以前的状态。当我们这样做的时候,让我们为我们的列添加宽度。.columns__item { width: 390px; writing-mode: horizontal-tb;}
不幸的是,我们无法在 Flexbox 或 Grid 布局之外使用 gap 属性。因此,让我们使用古老的技巧:一列后跟另一列将获得正确的边距。.columns__item + .columns__item { margin-left: 20px;}
我可能应该改用 .columns__item——第一个选择器,但这太容易了。我在这里尝试使用尽可能多的技巧!.columns { display: block; width: 100%; height: 100%;}
你已经可以看到这种方式对内容流的友好程度不亚于绝对定位(一点也不)。至于 HTML,它看起来不会很漂亮:<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 文档中。我不知道它是否合法,但它是完全有效的:<foreignObject x="0" y="0" width="390" height="100%"> <!-- Left --></foreignObject><foreignObject x="410" y="0" width="390" height="100%"> <!-- Right --></foreignObject>
不幸的是,SVG 包装的内容无法像 HTML 元素那样影响父元素的尺寸。所以我们必须自己设置它:在我们的例子中,它占据了整个页面的高度。.columns__item { position: absolute; clip-path: inset(50%); width: calc(50% - 10px);}
看,柱子还在那里,但它们是看不见的。让我们把它们放回我们需要的地方!但是父级的高度现在折叠起来没有任何内容,让我们用 height: 100% 来修复它。相对定位将保持这些列相对于父块的大小和位置。.columns { position: relative; height: 100%;}
现在是施展魔法的时候了。仅对于此演示,我们在标记中为每个新闻设置了 ID:news-first 和 news-second。我们可以使用这些 ID 使这些元素成为具有 -moz-element 函数的 background-image 属性的来源。多亏了多个背景图片,我们可以只使用一个元素。定位我们的元素:第一个到左上角,第二个到右上角。我们不需要重复。.columns { background-image: -moz-element(#news-first), -moz-element(#news-second); background-position: left top, right top; background-repeat: no-repeat;}
VS Code 的 CSS 语法认为函数中的 ID 有问题,但它有效!好吧,目前仅在 Firefox 中。正如我之前提到的,它还没有准备好用于任何生产代码。虽然它不只是编造的,因为它是 CSS Images Module Level 4 草案的一部分。<frameset cols="50%, 20, 50%" border="0"> <frame frameborder="0" src=""> <frame frameborder="0" src=""> <frame frameborder="0" src=""><frameset>
与“i”代表“内联”的 <iframe> 元素不同,<frameset> 应该占据整个窗口。不仅如此,它还应该取代 <body> 元素。在包含其他元素的页面上使用这种布局技术是不可能的。没问题!我们可以将它包装在另一个内联框架中。.columns { display: block; width: 100%; height: 100%; border: none;}
标记来了,这是最令人兴奋的部分。我们在 src 属性中没有文件的 URL,而是用特殊的 data:text/html 前缀让浏览器知道它不是 URL,而是“文件”本身。<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>
现在我们在 src 属性中有三个带有空文件的嵌套框架。我们要让中间的那个空着,因为它只是一个缺口。至于另外两个,会有我们的新闻文件。我通常在我的标记中使用双引号,但我必须在嵌套文档中切换为单引号才能使其正常工作。在下一个嵌套级别,我将完全停止使用它们。<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也是如此,唯一不同的是背景颜色和内容。最让我吃惊的是它可以在 Firefox、Chrome 和 Safari 中运行,尽管 <frameset> 和 <frame> 元素已经被弃用了很长时间。关键词:布局,定位,使用,方面,设计