Question

我在HTML页面中添加了一些子标题，但是该子标题导致该列无法正确显示，如该图所示。

我已经在子标题上尝试过显示块，但是我认为使用display时有另一种方法：grid;

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
  background-color: #2196F3;
}
.grid-item {
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
}

 <div class="grid-container">
  
  <a href="#"><div class="archive-title">Sub Header</div></a>

  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  
  <a href="#"><div class="archive-title">Sub Header</div></a>
  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div> 
  
  <a href="#"><div class="archive-title">Sub Header</div></a>
  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

每行而不是列的子标题的宽度应为100％。

Answer 1

编辑：对grid-column div使用.archive-title属性：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item {
  padding: 20px;
  background: gray;
  border: solid 1px lightgray;
}

.archive-title{
  background: lightgray;
  grid-column: 1/4;
}

<div class="grid-container">
  
  <div class="archive-title">Sub Header</div>
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  
  
    <div class="archive-title">Sub Header</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div> 
  
  
    <div class="archive-title">Sub Header</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

Answer 2

尝试一下：

HTML

<div class="content">
    <a href="http://local.local/status/for-sale/"><h1 class="ap-template-sub-heading archive-title">Selling</h1></a>
    <div class="post-500 listing type-listing status-publish has-post-thumbnail types-single-family-home bedrooms-2-bedrooms price-500k-750k state-california city-encino status-for-sale entry">
        <div class="widget-wrap">
            <div class="listing-wrap">
                <a href="http://local.local/listings/16480-oldham-street/"><img width="500" height="300" src="http://placehold.it/500x300&text=Placeholder" class="attachment-properties size-properties" alt=""></a><span class="listing-price">$100,000</span><span class="listing-text">For Sale</span><span class="listing-address">Address</span><span class="listing-city-state-zip">State</span><a href="http://local.local/listings/16480-oldham-street/" class="more-link">Listing</a></div>
        </div>
    </div>
    <div class="post-498 listing type-listing status-publish has-post-thumbnail features-basement types-single-family-home bedrooms-3-bedrooms price-200k-500k state-california city-encino status-for-sale entry">
        <div class="widget-wrap">
            <div class="listing-wrap">
                <a href="http://local.local/listings/16520-adlon-road/"><img width="500" height="300" src="http://placehold.it/500x300&text=Placeholder" class="attachment-properties size-properties" alt=""></a><span class="listing-price">$100,000</span><span class="listing-text">Sold</span><span class="listing-address">Address</span><span class="listing-city-state-zip">State</span><a href="http://local.local/listings/16520-adlon-road/" class="more-link">Listing</a></div>
        </div>
    </div>
    <div class="post-489 listing type-listing status-publish has-post-thumbnail types-single-family-home bedrooms-3-bedrooms price-200k-500k state-california city-encino status-for-sale entry">
        <div class="widget-wrap">
            <div class="listing-wrap">
                <a href="http://local.local/listings/4010-rogen-drive/"><img width="500" height="300" src="http://placehold.it/500x300&text=Placeholder" class="attachment-properties size-properties" alt=""></a><span class="listing-price">$100,000</span><span class="listing-text">For Sale</span><span class="listing-address">Address</span><span class="listing-city-state-zip">State</span><a href="http://local.local/listings/4010-rogen-drive/" class="more-link">Listing</a></div>
        </div>
    </div>


    </div><a href="http://local.local/status/sold/"><h1 class="ap-template-sub-heading archive-title">Sold</h1></a>

    <div class="post-488 listing type-listing status-publish has-post-thumbnail types-single-family-home bedrooms-4-bedrooms price-500k-750k state-california city-encino status-for-sale entry">
        <div class="widget-wrap">
            <div class="listing-wrap">
                <a href="http://local.local/listings/17055-mooncrest-drive/"><img width="500" height="300" src="http://placehold.it/500x300&text=Placeholder" class="attachment-properties size-properties" alt=""></a><span class="listing-price">$100,000</span><span class="listing-text">For Sale</span><span class="listing-address">Address</span><span class="listing-city-state-zip">State</span><a href="http://local.local/listings/17055-mooncrest-drive/" class="more-link">Listing</a></div>
        </div>
    <div class="post-504 listing type-listing status-publish has-post-thumbnail types-single-family-home bedrooms-4-bedrooms price-500k-750k state-california city-encino status-sold entry">
        <div class="widget-wrap">
            <div class="listing-wrap">
                <a href="http://local.local/listings/17038-cotter-place/"><img width="500" height="300" src="http://placehold.it/500x300&text=Placeholder" class="attachment-properties size-properties" alt=""></a><span class="listing-price">$100,000</span><span class="listing-text">Sold</span><span class="listing-address">Address</span><span class="listing-city-state-zip">State</span><a href="http://local.local/listings/17038-cotter-place/" class="more-link">Listing</a></div>
        </div>
    </div>
    <div class="post-496 listing type-listing status-publish has-post-thumbnail types-single-family-home bedrooms-4-bedrooms price-500k-750k state-california city-encino status-sold entry">
        <div class="widget-wrap">
            <div class="listing-wrap">
                <a href="http://local.local/listings/16760-octavia-place/"><img width="500" height="300" src="http://placehold.it/500x300&text=Placeholder" class="attachment-properties size-properties" alt=""></a><span class="listing-price">$100,000</span><span class="listing-text">For Sale</span><span class="listing-address">Address</span><span class="listing-city-state-zip">State</span><a href="http://local.local/listings/16760-octavia-place/" class="more-link">Listing</a></div>
        </div>
    </div>
</div>

问题是已出售链接出现在第四张卡片之后。现在，链接已添加到第三张卡之后。

Answer 3

解决方案：

首先，您可以在第三元素列表之后添加“已出售”超链接。这会很棒。如果无法执行此操作，则必须使用 DISPLAY：FLEX 属性。在display flex属性中，您可以轻松更改元素的顺序...因此可以尝试display flex。

从CSS网格中排除标题

3 个答案: