main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 60px;
grid-row-gap: 60px;
}
p {
grid-column: 2 / span 1;
margin-bottom: 0;
background-color: yellow;
}
p p {
margin-top: -60px;
}<main>
<h3>Heading</h3>
<p>Some text, blah, blah blah</p>
<h3>Heading</h3>
<p>Some text, blah, blah blah</p>
<h3>Heading</h3>
<p>Some text, blah, blah blah</p>
<p>Another paragraph of text</p>
<p>Possibly another paragraph of text</p>
<h3>Heading</h3>
<p>Some text, blah, blah blah</p>
</main>我有一個簡單的兩列網格，左列中有標題，右列中有段落文本。我還設定了 grid-row-gap 以在行之間提供一個很好的間隙。這一切都很好，直到在標題之后，有多個段落<p>元素。第二個<p>元素進入新行。我希望所有<p>段落文本都在一個單元格內。<p>或者在包含相鄰元素的行之間沒有網格行間隙。或者某種軟糖。
這就是我要的。兩列。<h3>在左欄中。右欄中的文本。如果有不止一個<p>，它們之間就沒有網格行間隙（或沒有間隙的外觀）。
<h3> | <p>
==========
<h3> | <p>
==========
<h3> | <p>
| <p>
| <p>
=========
<h3> | <p>
這是我的代碼
<main>
<h3>Heading</h3>
<p>Some text, blah, blah blah</p>
<h3>Heading</h3>
<p>Some text, blah, blah blah</p>
<h3>Heading</h3>
<p>Some text, blah, blah blah</p>
<p>Another paragraph of text</p>
<p>Possibly another paragraph of text</p>
<h3>Heading</h3>
<p>Some text, blah, blah blah</p>
</main>
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 60px;
grid-row-gap: 60px;
}
p {
grid-column: 2 / span 1;
margin-bottom: 0;
background-colour: yellow;
}
uj5u.com熱心網友回復：
我想我可以做這樣的事情：
p p {
margin-top: -60px;
}
uj5u.com熱心網友回復：
最簡單、最合理的做法似乎就是將段落包裝在div元素中。
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 60px;
grid-row-gap: 60px;
}
main div {
grid-column: 2 / span 1;
}
p {
margin-bottom: 20px;
}<main>
<h3>Heading</h3>
<div>
<p>Some text, blah, blah blah</p>
</div>
<h3>Heading</h3>
<div>
<p>Some text, blah, blah blah</p>
</div>
<h3>Heading</h3>
<div>
<p>Some text, blah, blah blah</p>
<p>Another paragraph of text</p>
<p>Possibly another paragraph of text</p>
</div>
<h3>Heading</h3>
<div>
<p>Some text, blah, blah blah</p>
</div>
</main> uj5u.com熱心網友回復：
我會像下面這樣對第一個孩子進行推理
main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 60px;
}
h3 {
margin: 0;
}
p {
grid-column: 2;
margin: 0;
background-color: yellow;
}
h3:not(:first-child),
h3:not(:first-child) p{
margin-top: 60px
}<main>
<h3>Heading</h3>
<p>Some text, blah, blah blah</p>
<h3>Heading</h3>
<p>Some text, blah, blah blah</p>
<h3>Heading</h3>
<p>Some text, blah, blah blah</p>
<p>Another paragraph of text</p>
<p>Possibly another paragraph of text</p>
<h3>Heading</h3>
<p>Some text, blah, blah blah</p>
</main>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530760.html
標籤：htmlcssCSS网格
上一篇：<h1>'從墻后升起'入口影片