Here's my problem if I don't use a <br> after <hr> my image goes away like this:
So I added the <br>, and now I have this result:
I used some margin to reduce the size of the blank space, but I'd like to be close such as this result I designed:
Here's my HTML code:
.articleactu {
grid-column: 1 / -1;
grid-gap: 36px;
display: grid;
grid-template-columns: 190px auto;
flex-direction: column;
}
.articleactu img {
border-radius: 15px;
max-width: 200px;
}
p {
word-wrap: break-word;
max-width: 650px;
}
p1 {
line-height: 30px;
font-weight: bold;
}
p2 {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
margin-top: -10px;
width: 480%;
opacity: 12%;
}<img src="images/vanguard.jpeg" alt="Article GTA " class="center">
<div>
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
<br>
<img src="images/marvel.jpg" alt="Article GTA " class="center">
<div>
<p1>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p1>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>Thanks in advance for your help !
CodePudding user response：
One approach is as follows, though bear in mind I've taken the liberty of replacing the non-standard HTML elements, <p1> and <p2>, replacing them with the valid <p> element:
/* a simple reset, in order to ensure all elements have
the same defaults: */
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
/* we're using CSS flex-box layout: */
display: flex;
/* we want the content to wrap, as the <img> and
<div>, containing the text, are visually adjacent,
but we want the content to appear in a vertical
orientation: */
flex-wrap: wrap;
width: 90vw;
margin: 0 auto;
/* defining a visual separation between elements: */
gap: 1em;
}
.wrapper img {
/* defining the width of the <img> element: */
width: 200px;
/* along with setting that <img> to fully-cover
its available dimension in the layout: */
object-fit: cover;
}
/* defining styles for <img> elements that aren't
successfully loaded */
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
/* here we style the <div> elements that follow the <img>
elements: */
.wrapper img div {
/* we set the <div> to allow it to grow to occupy space available: */
flex-grow: 1;
/* we set the flex-basis to 50% in order that, when the element
occupies 50% of the available space, the layout shifts to
occupy two rows, with the <img> above the <div>: */
flex-basis: 50%;
}
hr.solid {
/* the <hr> is a flex-item, and here we use the flex
shorthand to set the flex-grow, flex-shrink and
flex-basis properties, to allow it to grow, not allow
it to shrink and set its width as 100%: */
flex: 1 0 100%;
height: 3px;
background-color: currentColor;
}
/* assuming that you don't want a trailing <hr> element at the
end of the list of articles; if you do this can be removed: */
hr:last-child {
display: none;
}<!-- the following '.wrapper' element is added to contain the list of elements you're
showing, though if no parent element exists the CSS could be applied to the <body>
element instead: -->
<div class="wrapper">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<div>
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<div>
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
</div>This is easier to layout, though, if you wrap the <img> element inside the <div> with the text content and then use CSS grid to style that <div>:
/* simple reset: */
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
/* because related elements - the <img> and the text - are
all contained within the same descendant element, we can
use flex-direction to force the content into a vertical
orientation: */
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
/* I applied a class-name to easily access and style the <div>
elements that contain the content: */
div.card {
/* here we use CSS grid layout, which allows for a two-
dimensional layout of the contents: */
display: grid;
/* defining the vertical, and horizontal, gaps between
adjacent tracks (columns/rows): */
gap: 0.5em 1em;
/* defining the named grid areas, here we define three
rows of content, each row with two named columns: */
grid-template-areas:
"img title"
"img content"
"img release-date";
/* we then define the widths of those columns; the first
named 'img' is 200px wide, and the second is as wide
as possible to occupy the remaining space once the
width of the 'img' column is removed: */
grid-template-columns: 200px 1fr;
}
.wrapper img {
/* we specified already that the 'img' area is 200px in
width; here specify that the <img> should fill the
available space (without distorting the aspect-ratio): */
object-fit: cover;
/* we place the <img> element in the 'img' area of the
containing grid: */
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}
hr.solid {
height: 3px;
background-color: currentColor;
}
hr.solid:last-child {
display: none;
}<div class="wrapper">
<!-- applying a somewhat meaningful class-name to the <div> element(s) which
contain the content: -->
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<hr class="solid">
</div>Of course, the above can be further simplified by removing the <hr> elements, and instead using CSS generated content to create the separators:
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
div.card {
display: grid;
gap: 0.5em 1em;
grid-template-areas:
"img title"
"img content"
"img release-date"
/* a grid-item will only occupy one track (row/column) by
default, so here we add a two-column grid-area named 'hr'
for the psuedo-<hr> to occupy: */
"hr hr";
grid-template-columns: 200px 1fr;
}
/* we use the ::after pseudo-element to create the visual line: */
div.card::after {
background-color: currentColor;
/* for a pseudo-element to be rendered the content, even if
only an empty string, must be set: */
content: '';
/* we place the element - rendered as a grid-item - into the
'hr' grid-area: */
grid-area: hr;
height: 3px;
/* we add a margin-top to adjust the spacing of the pseudo-
element, so it's visually centred between the adjacent cards: */
margin-top: 0.5em;
}
.wrapper img {
object-fit: cover;
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}<div class="wrapper">
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
</div>Assuming that you don't want the trailing pseudo-element to create a line at the end of the content a further refinement can be used; here we use the :not() negation operator to refine the selector so that we select all ::after pseudo-elements of all div.card elements that are not the :last-child of their parent:
div.card:not(:last-child)::after {
background-color: currentColor;
content: '';
grid-area: hr;
height: 3px;
margin-top: 0.5em;
}
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
div.card {
display: grid;
gap: 0.5em 1em;
grid-template-areas:
"img title"
"img content"
"img release-date"
"hr hr";
grid-template-columns: 200px 1fr;
}
div.card:not(:last-child)::after {
background-color: currentColor;
content: '';
grid-area: hr;
height: 3px;
margin-top: 0.5em;
}
.wrapper img {
object-fit: cover;
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}<div class="wrapper">
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<p>CALL OF DUTY : VANGUARD : Est-il bon ?</p>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<p>MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</p>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<p> Publié le 25 novembre 2021 </p>
</div>
</div>I'd also, in closing, recommend that you use more semantic means to wrap the text-content; it looks like you have content such as a title, article text and a release date? If so, I'd personally – and this is highly subjective – update the HTML to the following:
*,
::before,
::after {
box-sizing: border-box;
color: #030;
font: 1rem/1.5 sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 90vw;
margin: 0 auto;
gap: 1em;
}
div.card {
display: grid;
gap: 0.5em 1em;
grid-template-areas:
"img title"
"img content"
"img release-date"
"hr hr";
grid-template-columns: 200px 1fr;
}
div.card:not(:last-child)::after {
background-color: currentColor;
content: '';
grid-area: hr;
height: 3px;
margin-top: 0.5em;
}
.card h2.title {
color: #050;
font-size: 1.2rem;
font-weight: bold;
}
/* here we select all ::before pseudo-elements of
all <time> elements that have a 'data-prefix'
custom attribute: */
time[data-prefix]::before {
/* setting the content to be equal to the value of
the 'data-prefix' attribute, using the attr()
function, and adding a string to follow that
attribute-value: */
content: attr(data-prefix) ': ';
font-weight: bold;
}
.wrapper img {
object-fit: cover;
grid-area: img;
}
.wrapper img:empty {
border: 2px solid currentColor;
background-image: repeating-linear-gradient(45deg, transparent 0 10px, #ccc 10px 15px);
text-align: center;
}<div class="wrapper">
<div class="card">
<img src="images/vanguard.jpeg" alt="Article GTA" class="center">
<!-- a page should have a <h1> element to title the page or document; here I use a
<h2> element (though any other type of heading element could be used) as it's
hierarchically/semantically less important than the page-title; if the cards
appear in a section that itself has a heading, this element should be titled
with a lower-significance heading, <h3>, <h4>... -->
<h2 class="title">CALL OF DUTY : VANGUARD : Est-il bon ?</h2>
<p>Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<!-- in order to make the date of release (arguably) accessible to user-agents that
can parse such information I chose to use a <time> element with the datatime
attribute set to the referenced date: -->
<time class="release-date" datetime="2021-11-25" data-prefix="Publié le">25 novembre 2021 </time>
</div>
<div class="card">
<img src="images/marvel.jpg" alt="Article GTA" class="center">
<h2 class="title">MARVEL AVENGERS : Le personnage de Spider-Man bientôt dans le jeu.</h2>
<p> Les fans demandent, Square Enix donne. En effet, Spider-Man sera bientôt jouable dans le jeu sortit il y a peu via DLC...</p>
<time class="release-date" datetime="2021-11-25" data-prefix="Publié le">25 novembre 2021 </time>
</div>
</div>References:
- CSS:
- Adjacent-sibling combinator (
attr().content.display.flex(shorthand).:last-child.:not().object-fit.- Pseudo-elements.
- Adjacent-sibling combinator (
- HTML:
Bibliography:
CodePudding user response：
You should always post working code. At the very least I assume you forgot to add the <div >.
Also p1 and p2 are not valid HTML elements. If you want to style them differently, use a valid element (such as p) and classes.
Your problem is that you forgot that the <hr> elements also are included in the grid.
The elements inside the grid, are distributed (by default) from the top left, row by row. Without the <br> something like this:
------- -------
| img | div |
------- -------
| hr | img |
------- -------
| div | |
------- -------
By adding the <br> you are adding an element that is then placed into the second column:
------- -------
| img | div |
------- -------
| hr | br |
------- -------
| img | div |
------- -------
However now the <hr> only covers the first column which you try to compensate with the width.
Instead you need to tell the hr, to cover two columns like this:
------- -------
| img | div |
------- -------
| hr |
------- -------
| img | div |
------- -------
This can be done, for example with the grid-columns property and the span keyword:
hr.solid {
grid-column: span 2;
with: 100%
opacity: 12%;
}
The width is needed, because as a grid element the <hr> looses it default width. Also remove the negative margin.
The large gap around the <hr> is due to grid-gap: 36px with applies to vertical and horizontal gaps. To reduce the distance around the <hr>, set a separate value for the horizontal gaps:
grid-gap: 0 36px;
For a complete example look at https://jsfiddle.net/3qywz8e7/1/
BTW, you should learn to use the developer tools of your browser. They have tools built in to help you visualize the grid. For example in Chrome: https://developer.chrome.com/docs/devtools/css/grid/
CodePudding user response：
Here is a flexbox sample of your code and need some change, good luck.
.flex-container {
display: flex;
flex-direction: column;
align-content: flex-start;
height: 100%;
padding: 15px;
gap: 5px;
}
.flex-container > div{
border-radius: 5px;
padding: 8px;
}
.articleactu {
grid-column: 1 / -1;
grid-gap: 36px;
}
.articleactu img {
border-radius: 15px;
max-width: 200px;
}
p {
word-wrap: break-word;
max-width: 650px;
}
p1 {
line-height: 30px;
font-weight: bold;
}
p2 {
font-size: 14px;
font-weight: bold;
color: #662189;
}
hr.solid {
margin : 10px auto 10px auto;
width: 100%;
opacity: 12%;
} <div class="flex-container">
<div>
<img src="https://via.placeholder.com/250" alt="Article GTA " class="center">
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
<div>
<img src="https://via.placeholder.com/250" alt="Article GTA " class="center">
<p1>CALL OF DUTY : VANGUARD : Est-il bon ?</p1>
<p> Les avis des fans de la saga sont mitigés et ça peut se comprendre, plusieurs bugs ont été détectés et empêche les joueurs de jouer convenablement...</p>
<p2> Publié le 25 novembre 2021 </p2>
</div>
<hr class="solid">
</div>