How to make a div snap to the side of the tab under a certain width?
Question
I'm making a 'news page'-like webpage, and it works perfectly on a 16:9 display, but it struggles with smaller width tabs. There are 3 solutions I want to test.
- Making the margin that holds the div away from the left side of the tab exponentially decrease in width
- Make the margin disappear under a certain width
- Stop using margins, find another way to keep the div away from the side of the tab and make that disappear under a certain width of the tab.
I don't know if any of these work, but I've seen pages doing this, and I want this feature on my page. Sadly, I have not found anything like this on the internet and just got bored. I have not tried anything because of my lack of knowledge about solving this problem. To demonstrate the issue, my code:(HTML with inline css)
<html>
<body>
<div style= "width:60%; margin-left:20%;">
<p style="
margin:0px;
word-wrap:break-word;
margin-top:0px;">Praesent semper, leo ac scelerisque
volutpat, massa ex volutpat dui, in
suscipit mauris neque auctor quam.
Vestibulum vel finibus elit.</p>
</div>
</body>
</html>
As you can see, if the page is scaled down to a small (around 1000px) width, the 40 % empty space is just too much, so I want to find a way to get rid of that margin and set the width to 100%. I do not want to stick to using margins, so if there is a way to use something else, I'd be really happy.
Things I've tried N°1:
<html>
<body>
<div style= "width:60%; margin: 0 auto; min-width:500px">
<p style="
margin:0px;
word-wrap:break-word;
margin-top:0px;">Praesent semper, leo ac scelerisque
volutpat, massa ex volutpat dui, in
suscipit mauris neque auctor quam.
Vestibulum vel finibus elit.</p>
</div>
</body>
</html>
By horizontally centering the div and adding a minimal width I've
- Removed margins
- Made the empty parts disappear under a certain width
But this method still isn't the one I want to use, because if the page is smaller than the value given, you have to scroll sideways to read.
I got help for many people on this site and on other platforms, and solved the problem with flexbox. Thanks for your help.
1 answers
solution1
0 ACCPTED 2020-08-02 13:50:22
i think you need to read on flex-box
div {
display: flex;
flex-flow: flex-start;
width: 100%;
}
div p {
flex: 1;
}
if this is not what you meant i think you should reframe the question
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.