alignment of images in columns with containers
Question
I'm going to re-ask this question in a more simple way: I am using the following code from W3school, but I need to change the images to 50% which creates a huge gap between the columns. Is there a way to align the left column to the right so that the images are close together?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
</div>
</body>
</html>
1 answers
solution1
1 2020-11-03 19:46:20
So I think I "fixed" your issue with flexbox but I would suggest reordering your code structure. You can see the fix below. Also, I wrote an article on CSS references that you should check out. There are several links that I use almost daily when designing UI. Heres the link...
https://medium.com/@hunter.campbell843/css-references-for-new-developers-and-old-6e3dbead437f
.column { float: left; display: flex; //These are the only justify-content: center; //things i added width: 50%; padding: 5px; background-color: aqua; }
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.