i want the page to look like thisenter image description here and im not allowed to change the html so only im only allowed to style it via CSS. the HTML i got with it is this. what prevented me from solving it was that i could get the last 3 instances of the news class printed out the way it should be.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div >
<p>Home</p>
<p>Our games</p>
<p>Contact</p>
<p>Support</p>
<p>Log In</p>
</div>
<div >
<div >
<h1>Gaming Website</h1>
<p>
Welcome to our website! We have a wild variety of games that you will probably like.
Feel free to make a suggestion if you'd like to have another game added.
</p>
</div>
<div >
<h3>Steam Support is now live</h3>
<p>
From now on, you can also start up games from your Steam library!
The developers have worked hard for this functionality.
If you have any bugs, report them at the Support page.
</p>
</div>
<div >
<h3>Minecraft Steve confirmed for Smash?</h3>
<p>
Is Steve coming to Smash Ultimate?
We have the latest hints and potential leaks to keep you
updated about the possibility of the iconic tree-puncher
coming to Smash Ultimate.
</p>
</div>
<div id="breaking" >
<h3>Half-Life 3 confirmed</h3>
<p>
It is finally real. Since 1998, fans across the globe have been
hoping for a conclusion to the Half-Life trilogy that was started
ages ago.
However, it was last Tuesday when it was announced that the game
will be published next summer.
</p>
</div>
</div>
</body>
this is as far as i got. pls correct me if i can do things easier or via another way im very new to this.
CodePudding user response：
You could still use the display: flex on .content, and use a fixed width 100% on the first child and let the other child have flex: 1 as follows:
.content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.news:first-child {
width: 100%;
}
.news:not(:first-child) {
flex: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div >
<p>Home</p>
<p>Our games</p>
<p>Contact</p>
<p>Support</p>
<p>Log In</p>
</div>
<div >
<div >
<h1>Gaming Website</h1>
<p>
Welcome to our website! We have a wild variety of games that you will probably like. Feel free to make a suggestion if you'd like to have another game added.
</p>
</div>
<div >
<h3>Steam Support is now live</h3>
<p>
From now on, you can also start up games from your Steam library! The developers have worked hard for this functionality. If you have any bugs, report them at the Support page.
</p>
</div>
<div >
<h3>Minecraft Steve confirmed for Smash?</h3>
<p>
Is Steve coming to Smash Ultimate? We have the latest hints and potential leaks to keep you updated about the possibility of the iconic tree-puncher coming to Smash Ultimate.
</p>
</div>
<div id="breaking" >
<h3>Half-Life 3 confirmed</h3>
<p>
It is finally real. Since 1998, fans across the globe have been hoping for a conclusion to the Half-Life trilogy that was started ages ago. However, it was last Tuesday when it was announced that the game will be published next summer.
</p>
</div>
</div>
</body>CodePudding user response：
For the sake of having a different solutions:
1. column-count
The column-count CSS property breaks an element's content into the specified number of columns.
By using column-count: 3; on the parent and column-span: all; on the first child, you will get the result you want.
.content {
column-count: 3;
}
.news:first-child {
column-span: all;
}<div >
<div >
<h1>Gaming Website</h1>
<p>
Welcome to our website! We have a wild variety of games that you will probably like. Feel free to make a suggestion if you'd like to have another game added.
</p>
</div>
<div >
<h3>Steam Support is now live</h3>
<p>
From now on, you can also start up games from your Steam library! The developers have worked hard for this functionality. If you have any bugs, report them at the Support page.
</p>
</div>
<div >
<h3>Minecraft Steve confirmed for Smash?</h3>
<p>
Is Steve coming to Smash Ultimate? We have the latest hints and potential leaks to keep you updated about the possibility of the iconic tree-puncher coming to Smash Ultimate.
</p>
</div>
<div id="breaking" >
<h3>Half-Life 3 confirmed</h3>
<p>
It is finally real. Since 1998, fans across the globe have been hoping for a conclusion to the Half-Life trilogy that was started ages ago. However, it was last Tuesday when it was announced that the game will be published next summer.
</p>
</div>
</div>2. grid layout
A grid is a set of intersecting horizontal and vertical lines defining columns and rows. Elements can be placed onto the grid within these column and row lines. MDN - Grid layout
By using display: grid; on the parent, defining 3 columns grid-temlplate-columns: repeat(3, 1fr); and telling the first child to start from the first column and end at the latest one grid-column: 1 / -1;, you can get the result you want.
.content {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.news:first-child {
grid-column: 1 / -1;
}<div >
<div >
<h1>Gaming Website</h1>
<p>
Welcome to our website! We have a wild variety of games that you will probably like. Feel free to make a suggestion if you'd like to have another game added.
</p>
</div>
<div >
<h3>Steam Support is now live</h3>
<p>
From now on, you can also start up games from your Steam library! The developers have worked hard for this functionality. If you have any bugs, report them at the Support page.
</p>
</div>
<div >
<h3>Minecraft Steve confirmed for Smash?</h3>
<p>
Is Steve coming to Smash Ultimate? We have the latest hints and potential leaks to keep you updated about the possibility of the iconic tree-puncher coming to Smash Ultimate.
</p>
</div>
<div id="breaking" >
<h3>Half-Life 3 confirmed</h3>
<p>
It is finally real. Since 1998, fans across the globe have been hoping for a conclusion to the Half-Life trilogy that was started ages ago. However, it was last Tuesday when it was announced that the game will be published next summer.
</p>
</div>
</div>3. float
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
You could add float: left to every .news, defin their widths and add a clearfix to the parent.
.content:after {
content: '';
clear: both;
}
.news {
float: left;
}
.news:first-child {
width: 100%;
}
.news .news {
width: calc(100% / 3);
}<div >
<div >
<h1>Gaming Website</h1>
<p>
Welcome to our website! We have a wild variety of games that you will probably like. Feel free to make a suggestion if you'd like to have another game added.
</p>
</div>
<div >
<h3>Steam Support is now live</h3>
<p>
From now on, you can also start up games from your Steam library! The developers have worked hard for this functionality. If you have any bugs, report them at the Support page.
</p>
</div>
<div >
<h3>Minecraft Steve confirmed for Smash?</h3>
<p>
Is Steve coming to Smash Ultimate? We have the latest hints and potential leaks to keep you updated about the possibility of the iconic tree-puncher coming to Smash Ultimate.
</p>
</div>
<div id="breaking" >
<h3>Half-Life 3 confirmed</h3>
<p>
It is finally real. Since 1998, fans across the globe have been hoping for a conclusion to the Half-Life trilogy that was started ages ago. However, it was last Tuesday when it was announced that the game will be published next summer.
</p>
</div>
</div>4. flex
You can check the answer from @Damzaky.