J'ai ajouté des sous-titres à une page HTML, mais le sous-titre provoque l'affichage incorrect des colonnes, comme indiqué dans cette image.
J'ai déjà essayé le bloc d'affichage sur le sous-titre mais je suppose qu'il existe une méthode différente lors de l'utilisation de display: grid;
<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>
.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);
}
Les sous-titres doivent avoir une largeur de 100% pour chaque ligne et non pour chaque colonne.
3 Réponses :
Essayez ceci:
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>
Le problème était que le lien Vendu apparaissait après le quatrième carte. Maintenant, le lien est ajouté après la troisième carte.
Non, le sous-titre doit être ajouté après la 4e entrée, mais les annonces vendues doivent s'afficher en ligne. De toute évidence, les annonces vendues et le sous-titre Vendu ne sont pas correctement effacées.
Solution:
D'abord, vous pouvez ajouter le lien hypertexte "Vendu" après la liste des trois éléments ... ce sera super. Si vous ne parvenez pas à le faire, vous devez utiliser la propriété DISPLAY: FLEX ..Dans la propriété display flex, vous pouvez facilement modifier l'ordre de l'élément ... vous pouvez donc essayer la propriété display flex. .
Vous pouvez également consulter Fiddle: jsfiddle.net/Mayank0619/h0rb4p3y/6
Merci pour votre aide cependant, mon problème est causé par l'ajout des sous-titres, pas uniquement des colonnes. Cela a quelque chose à voir avec le nettoyage des flotteurs.
Modifier: utilisez la propriété grid-column pour les divs .archive-title :
<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>
.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;
}
L'en-tête doit avoir une largeur de 100%.
Je veux dire seulement 1 sous-en-tête par ligne
Fonctionne, mais ne fonctionne pas pour moi avec mon code. Je ne sais pas pourquoi mais je vais le marquer comme la réponse acceptée. Et si le sous-titre est un lien?
@Michelle C'est bizarre. Si cela aide, dans l'exemple de code que vous fournissez, cela fonctionne si vous ajoutez cette seule ligne au CSS: .archive-title {grid-column: 1/4;}
Fonctionne lorsque je change la sortie HTML afin que la classe archive-title soit appliquée à la balise a. Merci.
Essayez ceci dans CSS
.archive-title {display: block}Merci mais j'ai ajouté cela et cela n'a pas résolu le problème.