I have the following CSS, which allows me to create a row that wraps based on screen size. If there is enough space all items appear on one row, else it wraps to the next row with proper alignment.
My problem is that I have a description text under each "square" div. If this text is only one line there is no issue, but if this text is 2 or more lines, the square it is beneath gets pushed up and is no longer aligned with it's siblings. How can I prevent this? I've included example code as a snippet, it's easiest to open as a full screen view to see what I'm talking about. I want the tops of the squares to always be aligned
.flex-row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
align-self: stretch;
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.sub-row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 300px;
}
.square {
height: 250px;
width: 250px;
background-color: #900;
}
<body>
<div class="flex-row">
<div class="flex-col">
<div class="square">
</div>
<div class="sub-row">
<p>
Placeholder text Placeholder text Placeholder text Placeholder text Placeholder text
</p>
<p>
00
</p>
</div>
</div>
<div class="flex-col">
<div class="square">
</div>
<div class="sub-row">
<p>
Placeholder text
</p>
<p>
00
</p>
</div>
</div>
<div class="flex-col">
<div class="square">
</div>
<div class="sub-row">
<p>
Placeholder text
</p>
<p>
00
</p>
</div>
</div>
<div class="flex-col">
<div class="square">
</div>
<div class="sub-row">
<p>
Placeholder text
</p>
<p>
00
</p>
</div>
</div>
</div>
</body>
I've tried justifying the columns to flex-start and flex-end but that doesn't work. I've also messed with trying to use the align self property on the p element itself but I am unable to get the squares to be aligned if the text takes 2 or more lines.
Give align-items: flex-start to the flex-row (this overrides the default stretch behaviour).
Your dyanmic text being below the squares makes things easy as when the flex items wrap, the wrapping flex lines will will adjust to the height of the dynamic text in the preceeding flex line.
See demo below:
.flex-row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
/* align-self: stretch;*/
align-items: flex-start; /* ADDED */
}
.flex-col {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.sub-row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 300px;
}
.square {
height: 250px;
width: 250px;
background-color: #900;
}
<body>
<div class="flex-row">
<div class="flex-col">
<div class="square">
</div>
<div class="sub-row">
<p>
Placeholder text Placeholder text Placeholder text Placeholder text Placeholder text
</p>
<p>
00
</p>
</div>
</div>
<div class="flex-col">
<div class="square">
</div>
<div class="sub-row">
<p>
Placeholder text
</p>
<p>
00
</p>
</div>
</div>
<div class="flex-col">
<div class="square">
</div>
<div class="sub-row">
<p>
Placeholder text
</p>
<p>
00
</p>
</div>
</div>
<div class="flex-col">
<div class="square">
</div>
<div class="sub-row">
<p>
Placeholder text
</p>
<p>
00
</p>
</div>
</div>
</div>
</body>
Related
I'd like to put images with centered text underneath each image in columns, I'd also like to size the images to a specific width and height each and I also want to make it so that when the text gets too long the text gets split into 2 lines, but I dont want it to move the image up and down at the same time. What code should I use? I used some code I found on the internet which is linked below but that didn't work as I expected it to (the code can be found below). Thanks!
So far, I've used this code but it doesn't center the text and also skips spots which I don't want to happen. Please check the image I've attached to see the skipped spotsskipped spot
HTML
<div class="column">
<img src="extra/road96.jpg" alt="Road 96"style="width:180px;height:180px;"/\>
<a class='neon-button' href='https://www.mediafire.com/file/4a05b4tkaal5e50/Road_96.zip/file'\>Road 96
<a/>
<div/>
CSS
.column {
float: left;
width: 13.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
}
.sjamg {
text-align: justify;
width: [width of img];
}
.sjamg img {
display: block;
margin: 0 auto;
}
try using flex, and by using flex-direction change the direction of the container's items to Column
.main-container {
display: flex;
width: 100%;
height: 100vh;
flex-direction: Column;
justify-content: space-evenly;
}
.main-container p {
margin-left: 64px;
height: 5%;
width: auto;
}
.small-container {
height: 180px;
width: 180px;
background-color: blue;
}
<!DOCTYPE html>
<html>
<body>
<div class="main-container">
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
</div>
</body>
</html>
Try this:
.main-container {
display: flex;
width: 100%;
justify-content: space-evenly;
}
.mycolumn {
display: flex;
flex-direction: column;
width: 100%;
justify-content: space-evenly;
}
.main-container p {
margin: auto;
height: 5%;
width: auto;
}
.small-container {
height: 180px;
width: 50%;
background-color: red;
margin: auto;
}
<!DOCTYPE html>
<html>
<body>
<div class="main-container">
<div class="mycolumn">
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
</div>
<div class="mycolumn">
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
</div>
<div class="mycolumn">
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
</div>
<div class="mycolumn">
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
<div class="small-container"></div>
<p> your text </p>
</div>
</div>
</body>
</html>
I'm learning web dev basics with HTML and CSS. I met an issue today : I want to make a horizontal scroll on my page with paragraphs (represented here by Lorem) inside but they appear in line while i want them in block.
Here's my code :
.scroll {
display: flex;
justify-content: flex-start;
flex-direction: row;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.part {
display: inline-block;
align-content: flex-start;
overflow-x: visible;
overflow-y: visible;
flex-wrap: wrap;
height: 200px;
width: auto;
}
<div class="scroll">
<div class="part">
<p>
Lorem...
</p>
</div>
<div class="part">
<p>
Lorem...
</p>
</div>
<div class="part">
<p>
Lorem...
</p>
</div>
</div>
I have been trying tons of things but unsuccessful... (I think the first part is good)
Thanks in advance
.scroll {
flex-direction: column;
}
add this style..this will change the content flow to column wise
Flexbox provided a property called flex-direction. Which means that what direction the flexbox children are laid out in and by default this is set to row. flex-direction
.parent {
display: flex;
}
<div class="parent">
<div class="child1">
<p>Hello I'm Child 1</p>
</div>
<div class="child2">
<p>Hello I'm Child 2</p>
</div>
<div class="child3">
<p>Hello I'm Child 3</p>
</div>
</div>
As you see that in above example div is a block level element but they appear as inline becuase flex-direction is set to row by default. Now change the direction from row to column that will put flexbox children in a column layout.
.parent {
display: flex;
flex-direction: column;
}
<div class="parent">
<div class="child1">
<p>Hello I'm Child 1</p>
</div>
<div class="child2">
<p>Hello I'm Child 2</p>
</div>
<div class="child3">
<p>Hello I'm Child 3</p>
</div>
</div>
Hope that you understand the concept of flex-direction.
I want to achieve something like this
and I thought about using a flexbox to put these items in one row.
#container {
display: flex;
}
<div id="container">
<div class="box">
<p>
Text Box 1.1
</p>
<p>
Text Box 1.2
</p>
</div>
<div class="box">
<p>
<a>Link</a>
</p>
<p>
Text Box 2
</p>
</div>
<div class="box">
<p>
Text Box 3.
</p>
</div>
</div>
The first and the second div container should have the default alignment on the left side. The third container should be aligned at the right side of the parent container.
I don't want to use flex: 1 because on large screen sizes the spacing between div 1 and 2 would be too big. They should be placed close to each other.
When the screen size gets smaller, the space between the second and the third container should get smaller until the third container is next to the second container. To prevent the overlap I simply want to remove the flexbox with
#media(max-width: 500px){ /* just a sample width */
#container{
display: block
}
}
How can I achieve that?
This could be a solution to your problem. I added <div id="separator"> to separate (box 1 & 2) from (box 3). After that I used justify-content: space-between; on the main containerSee demo below:
#container {
display: flex;
justify-content: space-between;
}
#separator{
display: flex;
}
.box{
border: 1px solid black;
}
#media screen and (max-width: 500px) { /* just a sample width */
#container, #separator{
display: block;
}
}
<div id="container">
<div id="separator">
<div class="box">
<p>
Text Box 1.1
</p>
<p>
Text Box 1.2
</p>
</div>
<div class="box">
<p>
<a>Link</a>
</p>
<p>
Text Box 2
</p>
</div>
</div>
<div class="box">
<p>
Text Box 3.
</p>
</div>
No need to add extra HTML just add margin-left:auto to the last box
#container {
display: flex;
}
.box {
border: 1px solid green;
margin: 0 .25em
}
.box:last-child {
margin-left: auto;
}
<div id="container">
<div class="box">
<p>
Text Box 1.1
</p>
<p>
Text Box 1.2
</p>
</div>
<div class="box">
<p>
<a>Link</a>
</p>
<p>
Text Box 2
</p>
</div>
<div class="box">
<p>
Text Box 3.
</p>
</div>
</div>
I have 2 threads in an imageboard stacked on top of each other, each thread has some text and an image file.
I want images to be always on right of the thread, instead of being on top of reply button.
When I float image to right by float: right; the images keep stacking on top of each other instead and form a branch like structure
How do I force images with post-image class to not break <div> structure of following thread and stay on right of screen?
<div class="you" id="thread_27" data-board="b" align="Right">
<div class="files">
<div class="file">
<p class="fileinfo">File: 1454704253855.jpg <span class="unimportant">(78.69 KB, 1024x768, <span class="postfilename">soft-color-background.jpg</span>)</span>
</p>
<img class="post-image" src="/b/thumb/1454704253855.png" style="width: 255px; height: 192px; max-width: 98%;" alt="">
</div>
</div>
<div class="post op" id="op_27">
<p class="intro">
<input class="delete" name="delete_27" id="delete_27" type="checkbox">
<label for="delete_27"><span class="name">Anonymous (You)</span>
<time data-local="true" datetime="2016-02-05T20:30:54Z">02/05/16 (Fri) 22:30:54</time>
</label> <a class="post_no" id="post_no_27" onclick="highlightReply(27)" href="/b/res/27.html#27">No.</a><a class="post_no" onclick="citeReply(27)" href="/b/res/27.html#q27">27</a>[Reply]</p>
<div class="body">xxxxxx2</div>
</div>
<br class="clear">
<hr>
</div>
<div class="you" id="thread_26" data-board="b" align="Right">
<div class="files">
<div class="file">
<p class="fileinfo">File: 1454704190918.jpg <span class="unimportant">(157.33 KB, 1024x768, <span class="postfilename" title="mac-style-presentation-background.jpg">mac-style-presentation-bac….jpg</span>)</span>
</p>
<img class="post-image" src="/b/thumb/1454704190918.png" style="width: 255px; height: 192px; max-width: 98%;" alt="">
</div>
</div>
<div class="post op" id="op_26">
<p class="intro">
<input class="delete" name="delete_26" id="delete_26" type="checkbox">
<label for="delete_26"><span class="name">Anonymous (You)</span>
<time data-local="true" datetime="2016-02-05T20:29:51Z">02/05/16 (Fri) 22:29:51</time>
</label> <a class="post_no" id="post_no_26" onclick="highlightReply(26)" href="/b/res/26.html#26">No.</a><a class="post_no" onclick="citeReply(26)" href="/b/res/26.html#q26">26</a>[Reply]</p>
<div class="body">xxxxx</div>
</div>
<br class="clear">
<hr>
</div>
when I add CSS
.post-image
{
float: right;
}
it breaks everything.
jsfiddle before
js fiddle after floating post-image to the right
This happens because of float left or right. clear controls the float behavior hence, the ideal way is to make all the float properties inside a container usually div. Sometimes, browser renders it differently so whenever coming to a new container or sibling, ideal way is to clear the float(if you don't need the floating property).
In your code you could probably
Add this:
.clear{
clear:both;
}
to better understand. Also don't forget to play with it to put it ideally where it is required.
If you can use flexbox (no way to old browsers) try something like:
.row{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: flex-start;
}
.col1{
position: relative;
flex: 1 1 100%;
align-self: stretch;
overflow: hidden;
}
.col2{
position: relative;
display: flex;
flex-direction: column;
flex: 0 1 45px;
align-self: stretch;
}
on a html strukture like
<div class="row">
<div class="col1">
</div>
<div class="col2">
</div>
</div>
Add one more div with "clear: both" styling will fix your problem.
<div class="file">
your code here...
<div style="clear:both"></div>
</div>
jsfiddle
In Safari 8.0.8 on Macbook.
I'm using flexbox to distribute elements in a grid-like container.
My .eventContainer is parent to multiple .event boxes which should be distributed across the rows by flexbox. It works fine in Firefox and Chrome but Safari displays the events on their own line, rather than next to each other!
<div class="eventContainer">
<div class="event">
<div class="thumb">
<img src="http://imgur.com/JDxjEknb.jpg">
</div>
<p class="thumbDate">Fri 18 Sept</p>
<p class="thumbArtist">Event 1</p>
<p class="thumbTitle">Subtitle 1</p>
<p class="thumbLocation">Location</p>
</div>
<div class="event">
<div class="thumb">
<img src="http://imgur.com/AwA5ga7b.jpg">
</div>
<p class="thumbDate">Sat 19 Sept</p>
<p class="thumbArtist">Event 2</p>
<p class="thumbTitle">Title 2</p>
<p class="thumbLocation">Subtitle 2</p>
</div>
<div class="event">
<div class="thumb">
<img src="http://imgur.com/9z5NkBxb.jpg">
</div>
<p class="thumbDate">Sat 19 Sept</p>
<p class="thumbArtist">Event 3</p>
<p class="thumbTitle">Title 3</p>
<p class="thumbLocation">Subtitle 3</p>
</div>
<!-- Fix for FlexBox -->
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
CSS:
.eventContainer {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.event {
display: inline-block;
margin-bottom: 35px;
width: 100%;
max-width: 200px;
margin-right: 15px;
cursor: pointer;
}
What have I missed here?
JSFiddle Example: http://jsfiddle.net/foepzgf8/1/
Can try it in both Chrome and Safari and see what I mean.
It's actually not justify-content in this situation. When you run into issues with flexbox, it's always good to go back and define flex-grow, flex-shrink, and flex-basis on the children of the flexbox container.
If you add this to .event your issue will be resolved:
-webkit-flex: 1 0 200px;
flex: 1 0 200px;
Updated fiddle: http://jsfiddle.net/foepzgf8/5/