我有一個兩列網格。
main {
max-width: 300px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6.4rem;
}
h3::before {
content: '';
display: block;
background-color: black;
height: 1px;
grid-column: 1 / span 2;
}<main>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
</main>main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6.4rem;
}
左欄中有標題，右欄中有正文。
是否有可能border-top在我的H3標題（顯示在左欄中）上有一個跨越兩列的？可能使用 before:: 偽元素？因此，標題上方出現一條水平線，并橫跨兩列。就像嘗試<hr>在每個之前插入一個元素H3跨越兩列的元素之前插入一個元素一樣。
我有以下內容：
h3::before {
content: "";
position: absolute;
border-top: 1px solid;
width: 100%;
grid-column: 1 / -1;
}
但是邊框頂部超出了包含元素 ( main) 的寬度并觸及瀏覽器視窗的右側。Position: relative似乎不起作用。
更新
我試過這個，但黑線只延伸一列。
h3::before {
content: '';
display: block;
background-color: black;
height: 1px;
width: 100%;
grid-column: 1 / -1;
}
更新 2
我想我需要 CSS 網格將 before:: 偽元素視為實際元素，以便它跨越多列？那可能嗎？根據this 5 year old post偽元素被視為網格中的元素。偽元素就像 CSS 網格中的網格項但對我來說不是這樣。
uj5u.com熱心網友回復：
這可以通過一些可能很脆弱的 CSS 來完成，但我建議包裝塊并在那里設定邊框（設定塊（div？）全部為display: grid
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6.4rem;
}
main>p {
margin-top: 2em;
}
h3::before {
content: " ";
height: 3px;
width: 225%;
grid-column: 1 / 2;
display: inline-block;
border-color: #ff0000;
border-style: solid;
border-width: 0;
border-top-width: 0.2em;
}<main>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
</main>uj5u.com熱心網友回復：
一種方法如下，在 CSS 中帶有解釋性注釋：
/* using custom properties to style aspects of the elements in order
to position them appropriately and consistently: */
:root {
--grid-padding-block-start: 0.5em;
--grid-separator-height: 0.2rem;
}
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6.4rem;
/* added spacing between adjacent rows, using the custom property
that also defines the height/block-size of the separator: */
grid-row-gap: var(--grid-separator-height);
/* I chose to use position relative on the <main> element, rather
than the <h3>, in order to have the sizing and position relative
to the grid-container, rather than the grid-item: */
position: relative;
}
main > * {
/* a padding isn't necessary; but if a padding is used (and only
padding-block-start needs to have this property-value) then
using the custom property allows the "separator" pseudo-
element to be appropriately placed in the grid-row-gap spacing: */
padding-block: var(--grid-padding-block-start);
}
h3::before {
content: '';
/* the element size on the inline-axis (left-to-right in latin languages),
100% is relative to the <main> element, not the <h3>, as that's the first
element ancestor with a non-static position: */
inline-size: 100%;
/* sizing the element along the block-axis, and this is why the
grid-column-gap was also given this size: */
block-size: var(--grid-separator-height);
/* adjust to taste: */
background-color: #000;
/* to allow the pseudo-element to be sized in relation to the <main>, in terms
of percentage: */
position: absolute;
/* moving the element zero along the x-axis, and 100% of its own block-axis size
plus the size of the custom property (so that it occupies the grid-row-gap space,
and multiplying that by -1 to ensure that it moves vertically 'up' into that space
rather than further 'into' the <h3> element space: */
translate: 0 calc(-1 * (100% var(--grid-padding-block-start)));
}<main>
<h3>Heading One</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading Two</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading Three</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
</main>JS 小提琴演示。
參考：
block-size.calc().- CSS 自定義屬性。
- CSS 邏輯屬性。
grid-row-columns.grid-row-gap.inline-size.margin.margin-block.margin-block-start.margin-block-end.margin-inline.margin-inline-start.margin-inline-end.padding.padding-block.padding-block-start.padding-block-end.padding-inline.padding-inline-start.padding-inline-end.position.translate.
uj5u.com熱心網友回復：
一行代碼可以使用border-image
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6.4rem;
}
h3 {
/* 5px = thickness
15px = distance from the top
*/
border-image: linear-gradient(180deg,#000 5px,#0000 0) fill 0//15px 100vw;
}<main>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
<h3>Heading blah</h3>
<p>Velluptiae dolupiet, im ea dolut que expercia sandionsed mo minvelibus modi occati sit autat quis ut fugitias maio. Moluptat.</p>
</main>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/521606.html
標籤：htmlcss
上一篇：選擇該影像后將輸入檔案替換為影像
下一篇：使用C 前處理器進行簡單計算