Issue
Not sure if flexbox is the correct way of going about this, but basically I am looking for a 2 column flexbox.
In the first part I want to put random text in and the width of this part will adapt and become the same size as the text (whatever the text is).
The second part is a dotted hr line, which I want it to basically take up whatever space is remaining on the right-hand side.
Then there'll be a 16px gap in between. Is this the correct way to go about it? Where am I going wrong?
Thanks for any help, much appreciated !
Edit: Thanks to everyone who answered, they all worked great tbh, but the solution I chose allowed for some extra flexibility. Again, appreciate everyones time, I don't have enough 'reputation' to upvote everybody! =)
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
}
.h2-box {
width: 100%;
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
width: 100%;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}
<div class="main">
<div class="container">
<div class="h2-container">
<div class="h2-box"><h2 class="">This is a title sentance</h2></div>
<div class="hr-box"><hr></div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>
Solution
There are a couple of issue with the implementation. You are heading to the right direction but just need a little bit of a tweak
First of all, remove the width 100% on the h2-box
and the dot box.
Add flex-grow: 1;
to the dot box and you are good. This will force the element to span the rest of the remaining width.
I am not sure what is expected if your title is more than 1 line long but something to think about for you.
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
Not sure if you meant to set inline-flex, but display flex works just fine.
flex-direction
defaults to row so this is not needed
flex-wrap
defaults to nowrap so this is also not needed
I am also unsure where you want the dotted line with regards to the title on the left but you can align that vertically with ease using align-items
. I have used this in the example below to align the dots to the bottom using align-items: flex-end;
body {
font-family: Montserrat;
background-color: #f0f0f0;
color: #34363e;
}
.main {
height:100%;
width: 100%;
padding: 64px 0;
}
.container {
height:100%;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.h2-container {
display: flex;
padding: 0 32px 16px;
margin: 0;
width: 1136px;
gap: 16px;
align-items: flex-end;
}
h2 {
text-align: left;
font-size: 27px;
margin: 0;
}
.hr-box {
flex-grow: 1;
}
hr {
border: none;
border-top: 4px dotted #cccccc;
width: 100%;
height: fit-content;
}
p {
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 0 32px;
margin: 16px 0;
}
<div class="main">
<div class="container">
<div class="h2-container">
<div class="h2-box"><h2 class="">This is a title sentance</h2></div>
<div class="hr-box"><hr></div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque leo leo, interdum quis auctor at, congue a justo. Donec accumsan nulla id fringilla vulputate. Ut sed mauris pellentesque, venenatis dui quis, consectetur nisl.</p>
</div>
</div>
Answered By - Huangism
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.