what i want to make is picture below
and i made it to this far, using stackflow.
but i could't understand about positioning boxes
even though found some infos.
what should i do next?
<!-- html -->
<div class="boxbox">
<div class="box1">
<img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
</div>
<div class="box2">
<img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
</div>
<div class="box3">
<img src="E:\cloneoverwolf\img\overwolficon.jpg" alt=""> box article
</div>
</div>
<!-- css -->
.boxbox{
display: flex;
align-items: start;
justify-content: space-between;
}
This is one of simple approach for fix your layout.
.boxbox{
display: flex;
align-items: start;
justify-content: space-between;
}
img{
width:300px;
height:300px;
}
.box1,.box2{
width:50%
}
.box3{
width:50%;
margin:auto;
}
<div class="boxbox">
<div class="box1">
<img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
</div>
<div class="box2">
<img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
</div>
</div>
<div class="boxbox">
<div class="box3">
<img src="https://cdn.pixabay.com/photo/2015/11/28/17/55/paint-1067686_1280.jpg" alt=""> box article
</div>
</div>
Or using flex
.boxbox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box1,
.box2,
.box3 {
flex-basis: 50%;
min-height: 100px;
}
img {
width: 300px;
height: 300px;
}
.box3 {
margin: auto;
}
Related
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 2 years ago.
I have seen this, question has been asked a lot but I have not really gotten an answer that works. I am trying to create 3 centred divs with multiple rows using (flex box) not grid please. Is it possible and what simple way. it should be center aligned.
I am trying to achieve this.
see as its centrally aligned. but mine is kinda alined to the left and if I use Justify content:center for the wrapper the two boxes go in the middle, like this.
this is my code
<div class="wrapper">
<div id="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
</div>
.wrapper {
background: #ff0000;
text-align: center;
width: 90%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 5% 0;
justify-content: center;
}
#squares {
background: #00ff00;
width: 30%;
height: 100px;
margin: 10px;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
here's the link to my jfiddle for a clearer picture.
https://jsfiddle.net/9ros2v4j/6/
Thanks to anyone that can explain.
.wrapper {
background: green;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.wrapper-inner {
padding: 5px;
display: flex;
flex-wrap: wrap;
}
.square {
flex: 0 1 33.33%;
}
.square img {
width: 100%;
display: block;
}
.square-inner {
padding: 5px;
}
<div class="wrapper">
<div class="wrapper-inner">
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
</div>
</div>
One requirement is for justify-content: flex-start which would place your last row as per your need.
The second requirement you're asking for is that they should be centered also. For that I think you can use equal padding on both sides to make the rows look as if they are center-aligned.
Or
If you want you can place all your items in another div inside flex-container. Then you can justify-content: center the newly created div.
You can align items to the left with justify-content: flex-start; instead of justify-content: center but in order to center it all, you might need to start playing with margins and screen size.
If you open the below example on a full page, you will be able to see the expected result.
Please also note that you used id in multiple places (#squares) which could cause issues. I replaced it with a class.
.wrapper {
position: relative;
text-align: center;
height: auto;
background: #ff0000;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
}
.squares {
background: #00ff00;
width: 30%;
height: 100px;
flex: 0 31.33%;
margin: 1%;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
<div class="wrapper">
<div class="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
</div>
I want my three images to align side by side horizontally with captions under each of them, like in this link:(http://www.renaldi.com/projects/)
I tried to do them but failed. Here are my codes:
.photos {
display: flex;
justify-content: center;
}
.image {
display: block;
width: 30%;
}
.word {
display: block;
width: 100%;
text-align: center;
}
<div class="photos">
<img class="image" src="Project1.png">
<span class="word">Manhattan Sunday</span>
</div>
<div class="photos">
<img class="image" src="Project2.png">
<div class="word">Touching Strangers</div>
</div>
<div class="photos">
<img class="image" src="Project3.png">
<div class="word">I want your love</div>
</div>
How to fix them?
You can achieve this by adding a wrapper container, and applying some flexbox css to it. Setting the container to have a flex direction of row is what aligns them horizontally, and setting the flexdirection to column on the photos class is what places the caption beneath the image. For more info on flexbox see https://css-tricks.com/snippets/css/a-guide-to-flexbox/
HTML
<div class="container">
<div class="photos">
<img class="image" src="Project1.png" >
<span class="word">Manhattan Sunday</span>
</div>
<div class="photos">
<img class="image" src="Project2.png" >
<div class="word">Touching Strangers</div>
</div>
<div class="photos">
<img class="image" src="Project3.png" >
<div class="word">I want your love</div>
</div>
</div>
CSS
.container {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.photos{
display:flex;
justify-content:center;
flex-direction: column;
flex-grow: 1;
}
.image{
display:block;
width:30%;
}
.word{
display:block;
width: 100%;
text-align:center;
}
Working example: https://jsfiddle.net/Matthew_/ro1kahj0/2/
You can use figure and figcaption to answer your caption question. It adds accessibility to your website.
<figure>
<img src="project1.png" alt="A picture of Manhattan">
<figcaption>Manhattan Sunday</figcaption>
</figure>
a parent container with flex direction row
flex direction column for each photos child
align items center to center image (thanks #Matthew)
added background color so you can see the extent of each element
.photos {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #fafafa;
}
.image {
display: block;
width: 30%;
}
.word {
display: block;
width: 100%;
text-align: center;
background: #f0f0f0;
}
.photo-list {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
<div class="photo-list">
<div class="photos">
<img class="image" src="https://picsum.photos/200/300?image=1">
<span class="word">Manhattan Sunday</span>
</div>
<div class="photos">
<img class="image" src="https://picsum.photos/200/300?image=2">
<div class="word">Touching Strangers</div>
</div>
<div class="photos">
<img class="image" src="https://picsum.photos/200/300?image=3">
<div class="word">I want your love</div>
</div>
</div>
I have been using CSS grid for these types of layouts:
CSS:
.threeColumnGrid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
figure.threeColumnGridItem {
display: block;
padding: 10px;
text-align: left;
background-color: #EEE;
margin-inline-start: 0;
margin-inline-end: 0;
}
figure.threeColumnGridItem img {
display: block;
width: 100%;
}
figure.threeColumnGridItem figurecaption {
display:block;
width: 100%;
font-size: 1rem;
margin: 0;
}
HTML:
<div class="threeColumnGrid">
<figure class="threeColumnGridItem">
<img src="http://placekitten.com/g/300/300" alt="" />
<figurecaption>Caption</figurecaption>
</figure>
<figure class="threeColumnGridItem">
<img src="http://placekitten.com/g/400/400" alt="" />
<figurecaption>Caption</figurecaption>
</figure>
<figure class="threeColumnGridItem">
<img src="http://placekitten.com/g/600/600" alt="" />
<figurecaption>Caption</figurecaption>
</figure>
</div>
I have several columns of images of different sizes. As the sizes are unknown, one column will be the tallest. I now want to stretch out the other (smaller) columns to match that height by increasing the gaps between the images accordingly. Here is an example image:
And here is a jsfiddle of this example that I set up with flexbox.
#main {
width: 50%;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column:last-child {
margin-right: 0;
}
.column img {
width: 100%;
align-self: center;
}
<div id="main">
<div class="column">
<img src="http://placekitten.com/g/200/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/g/200/400">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/200">
<img src="http://placekitten.com/200/280">
<img src="http://placekitten.com/g/200/250">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/400">
<img src="http://placekitten.com/200/220">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
However in my specific case, I cannot use flexbox (as I need to absolute position some children), so I am now looking for a way to achieve the same thing without flexbox. Is there any way to get this vertical "space-between" distribution without flexbox?
Based on the comment regarding absolute positioning:
I have tried to get the absolute positioning to work without any success. Basically I am trying to place captions underneath each images, however this captions should not be part of the flow, so the gaps should keep the same with as if there were no captions. When I tried to place the captions underneath, I ended up with all captions on the bottom of the entire column.
The solution is to rust wrap the images and captions in a div (or better still a figure) and give that position relative...then position your captions absolutely.
Like so:
#main {
max-width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.holder {
position: relative;
}
.column img {
display: block;
max-width: 100%;
height: auto;
}
.caption {
position: absolute;
bottom: 0;
text-align: center;
background: rgba(255, 255, 255, 0.5);
width: 100%;
}
<div id="main">
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/300">
</div>
<div class="holder"> <img src="http://placekitten.com/200/300"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/400">
</div>
</div>
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/200">
<div class="caption">My Caption</div>
</div>
<div class="holder"> <img src="http://placekitten.com/200/280"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/250">
<div class="caption">My Caption</div>
</div>
</div>
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/400">
<div class="caption">Superduper long Caption In Here</div>
</div>
<div class="holder"> <img src="http://placekitten.com/200/220"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
</div>
fix image height and use "object-fit:cover;"
#main {
width: 50%;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column:last-child {
margin-right: 0;
}
.column img {
width: 100%;
align-self: center;
height:100px;
object-fit: cover;
}
<div id="main">
<div class="column">
<img src="http://placekitten.com/g/200/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/g/200/400">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/200">
<img src="http://placekitten.com/200/280">
<img src="http://placekitten.com/g/200/250">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/400">
<img src="http://placekitten.com/200/220">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
folks!
there is a problem layouting my page header :/
i want to place the logo and title on the left, and some usermenu/logout/messages on the right.
html:
<div class="banner">
<img class="logo" src="data:image/gif;base64,R0lGODdhMgAyAPQAAL7ikLjfh+r12q3adNTstfr99u/45OTz0fT67c7prMPkmbPdftnuv8nno9/wyP///6jYawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAAAF5iAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJvAUGvIBK8Kg+AJAAtUCIAaxVUQLxEGBPgi7JcMg+GrBvKfBQQBgFVLpUFxnUIwYGAwMIbSRyJAkPIl9SJlQPXCJXIgICJQsFDgeDJV9VCFIEmBADlSZPAwwPUqiXJl8FjyQDUgEGmKQip2cplX0Qf7GStCcEjIuNrScNUMhSbG5wJJqkCFCIWAMCbXR2eChgalqSgIGYAwWHI4uhj2MPBnYnAwAAC3PZMQv3qU0AAwocSLCgwYMIEypcyLChw4cQl4QAADs=">
<div class="title">foo</div>
<div class="logout">bar</div>
</div>
<div class="content">
Some Content..
</div>
css:
.banner {
height: 50px;
background-color: #feefef;
}
.img, .title, .logout{
vertical-align: text-bottom;
height:100%;
}
.logo {float: left;}
.title {float:left;}
.logout {float:right;}
https://jsfiddle.net/z9gervtm/3/
How do i move those texts to the bottom?
use flexbox to simplify your code
.banner {
height: 50px;
background-color: #feefef;
display: flex;
justify-content: space-between;
align-items: flex-end
}
.left {
display: flex;
align-items: flex-end
}
<div class="banner">
<div class="left">
<img class="logo" src="data:image/gif;base64,R0lGODdhMgAyAPQAAL7ikLjfh+r12q3adNTstfr99u/45OTz0fT67c7prMPkmbPdftnuv8nno9/wyP///6jYawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAAAF5iAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJvAUGvIBK8Kg+AJAAtUCIAaxVUQLxEGBPgi7JcMg+GrBvKfBQQBgFVLpUFxnUIwYGAwMIbSRyJAkPIl9SJlQPXCJXIgICJQsFDgeDJV9VCFIEmBADlSZPAwwPUqiXJl8FjyQDUgEGmKQip2cplX0Qf7GStCcEjIuNrScNUMhSbG5wJJqkCFCIWAMCbXR2eChgalqSgIGYAwWHI4uhj2MPBnYnAwAAC3PZMQv3qU0AAwocSLCgwYMIEypcyLChw4cQl4QAADs=">
<div class="title">foo</div>
</div>
<div class="logout">bar</div>
</div>
<div class="content">
Some Content..
</div>
I would just use flexbox and get rid of the floats. Add divs to have a left and right banner section. Align-items center to make it look nice:
.banner {
display: flex;
justify-content: space-between;
height: 50px;
padding: 0 20px;
background-color: #feefef;
}
.left {
display: flex;
align-items: center;
}
.right {
display: flex;
align-items: center;
}
.left img,
.right div:first-of-type {
margin-right: 10px;
}
<div class="banner">
<div class="left">
<img class="logo" src="data:image/gif;base64,R0lGODdhMgAyAPQAAL7ikLjfh+r12q3adNTstfr99u/45OTz0fT67c7prMPkmbPdftnuv8nno9/wyP///6jYawAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAMgAyAAAF5iAkjmRpnmiqrmzrvnAsz3Rt33iu73zv/8CgcEgsGo/IpHLJvAUGvIBK8Kg+AJAAtUCIAaxVUQLxEGBPgi7JcMg+GrBvKfBQQBgFVLpUFxnUIwYGAwMIbSRyJAkPIl9SJlQPXCJXIgICJQsFDgeDJV9VCFIEmBADlSZPAwwPUqiXJl8FjyQDUgEGmKQip2cplX0Qf7GStCcEjIuNrScNUMhSbG5wJJqkCFCIWAMCbXR2eChgalqSgIGYAwWHI4uhj2MPBnYnAwAAC3PZMQv3qU0AAwocSLCgwYMIEypcyLChw4cQl4QAADs=">
<div class="title">Title</div>
</div>
<div class="right">
<div class="logout">Logout</div>
<div class="messages">Messages</div>
</div>
</div>
<div class="content">
Some Content..
</div>
Using Flexbox, I'm trying to achieve this:
But I'm instead reaching this point:
Here is what I've got so far (vendor prefixes omitted). If someone could help get this working well in either Firefox or Chrome, I'd very much appreciate it.
img {
max-width: 100%;
}
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.item,
.img-wrapper {
align-items: center;
}
.item {
display: flex;
flex-direction: column;
width: 300px;
}
.img-wrapper {
flex-grow: 1;
flex-shrink: 0;
}
<div class="container">
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 </p>
</div>
</div>
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
</div>
<div class="excerpt-wrapper">
<p>Text goes here</p>
</div>
</div>
</div>
The align-items property applies only to flex containers.
You have it applied to img-wrapper:
.item,
.img-wrapper {
align-items: center;
}
...but this element is not a flex container.
Since img-wrapper does not have display: flex or display: inline-flex applied, align-items is being ignored.
Try this:
.item,
.img-wrapper {
align-items: center;
display: flex;
}
.container {
display: flex;
justify-content: center;
}
.item {
display: flex;
flex-direction: column;
width: 300px;
}
.item,
.img-wrapper {
align-items: center;
display: flex;
}
img {
max-width: 100%;
}
.img-wrapper {
flex-grow: 1;
flex-shrink: 0;
}
.excerpt-wrapper > p {
margin: 0;
}
<div class="container">
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
</div>
</div>
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
</div>
</div>
jsFiddle
And the only reason the text in the left column is vertically aligned in that location is because that happens to be where it meets the bottom margin of the photo.
If you want the text in the right column to be aligned in the same spot, make the top element an image or box equal in height to its cousin in the adjacent column.
.container {
display: flex;
justify-content: center;
}
.item {
display: flex;
flex-direction: column;
width: 300px;
}
.item,
.img-wrapper {
align-items: center;
display: flex;
}
img {
max-width: 100%;
}
.img-wrapper {
/* flex-grow: 1; */
flex-shrink: 0;
height: 269px;
width: 291px;
justify-content: center;
}
.excerpt-wrapper > p {
margin: 0;
}
<div class="container">
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
</div>
</div>
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
</div>
</div>
jsFiddle
If you need the display to adapt to a variable images size, and don't have problems with the width of the container (that is, you can set a size for it beforehand , or at least a maximum widtyh that will be wide enough for the content)
The you can change the flex direction to row, reorder the items so that the images go first, and force a wrap at the end of the images:
.container {
display: flex;
flex-wrap: wrap;
}
.container:after {
content: "";
order: 15;
width: 9999px;
}
.container div {
width: 200px;
}
.img-wrapper {
order: 10;
text-align: center;
}
.excerpt-wrapper {
order: 20;
border-top: solid 1px red;
}
img {
max-width: 100%;
}
<div class="container">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 </p>
</div>
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
</div>
<div class="excerpt-wrapper">
<p>Text goes here</p>
</div>
</div>