Re: Simple HTML & CSS code.
Peter Easthope wrote:
> From: Siard <shiems+debian@mailbox.org>
> Date: Wed, 26 Oct 2022 00:00:26 +0200
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <title> Test.html</title>
> <meta charset="UTF-8">
> </head>
> <body>
> <div style="display:flex; justify-content:space-between">
> <div>left</div>
> <div>right</div>
> </div>
> </body>
> </html>
>
> Thanks. Yes, that puts "left" on the left and "right" on the right.
After a good night's sleep, I realized that I could have answered it much
simpler. Just replace 'display: inline' with 'display: flex' in your
original code, that's all.
> I'm interested in a further detail illustrated with this simple example.
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <title> Test.html</title>
> <meta charset="UTF-8">
> </head>
> <body>
> <div style="display:flex; justify-content:space-between">
> <div>left++++++++++++++++++++</div>
> <div>====================right</div>
> </div>
> </body>
> </html>
>
> In a sufficiently wide window, Firefox renders this.
> left++++++++++++++++++++ ====================right
>
> If the right edge of the window is dragged to the left it comes to this.
> left++++++++++++++++++++====================right
>
> If the window is constrained further the display is trimmed on the
> right and provides horizontal scrolling.
> left++++++++++++++++++++=============
>
> For a narrow display, such as portait on a phone, an automatic line
> break avoids the scrolling.
> left++++++++++++++++++++
> ====================right
>
> Here this works.
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <title>Test.html</title>
> <meta charset="UTF-8">
> </head>
> <body>
> <span style="float:left">left++++++++++++++++++++</span>
> <span style="float:right">====================right</span>
> </body>
> </html>
>
> Comments?
>
> A more realistic example at http://movingaroundpender.ca/ .
Your code behind those two images in that URL:
<div style="display:flex; justify-content:space-between">
<span style="float:left">
<img src="image1.png" alt="...">
</span>
<span style="float:right">
<img src="image2.png" alt="...">
</span>
</div>
You are combining flex and float here, which is useless IMO.
To put the second image below the first one on narrow screens, you can add
'flex-wrap:wrap' to 'display':
<div style="display:flex; justify-content:space-between; flex-wrap:wrap">
<img src="image1.png" alt="...">
<img src="image2.png" alt="...">
</div>
If you like, you can mail me off-list for further questions.
Reply to: