This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
i got following problem:
I want the text to be displayed in a table of 3x2, which it does.
But the text in my second and third column is aligned to the bottom, because they are smaller than the text in my first column.
How do i set all of the texts to start at the top?
.row {
margin: 0% 15% 0% 15%;
}
.col {
width: 30%;
display: inline-block;
}
<html>
<body>
<div class="tab">
<div class="row">
<div class="col">
<p>Title</p>
</div>
<div class="col">
<p>Title</p>
</div>
<div class="col">
<p>Title</p>
</div>
</div>
<div class="row">
<div class="col">
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
</div>
<div class="col">
<p>12321312312312</p>
<p>12321312312312</p>
</div>
<div class="col">
<p>12321312312312</p>
</div>
</div>
</div>
</body>
</html>
Use vertical-align: top; Like this:
.row {
margin: 0% 15% 0% 15%;
}
.col {
width: 30%;
display: inline-block;
vertical-align: top;
}
<html>
<body>
<div class="tab">
<div class="row">
<div class="col">
<p>Title</p>
</div>
<div class="col">
<p>Title</p>
</div>
<div class="col">
<p>Title</p>
</div>
</div>
<div class="row">
<div class="col">
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
</div>
<div class="col">
<p>12321312312312</p>
<p>12321312312312</p>
</div>
<div class="col">
<p>12321312312312</p>
</div>
</div>
</div>
</body>
</html>
Add vertical-align to top in .col.
.col {
width: 30%;
display: inline-block;
vertical-align: top;
}
Easiest way would be the sue of the right tool for such task: CSS-Grid.
body {
margin: 0;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
<div>
<p>Title</p>
</div>
<div>
<p>Title</p>
</div>
<div>
<p>Title</p>
</div>
<div>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
</div>
<div>
<p>12321312312312</p>
<p>12321312312312</p>
</div>
<div>
<p>12321312312312</p>
</div>
Heres a simple and slight redesign, using grid, no vertical align needed
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="table">
<div class="row">
title
<div class="column">
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
<p>12321312312312</p>
</div>
</div>
<div class="row">
title
<div class="column">
<p>12321312312312</p>
<p>12321312312312</p>
</div>
</div>
<div class="row">
title
<div class="column">
<p>12321312312312</p>
</div>
</div>
</div>
</body>
</html>
CSS
.table {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Demo: https://codepen.io/anthony_718/pen/JjRRpoM
Related
I have a carousel that overflows it's container, to hide elements not yet visible, so they can be animated using CSS.
I would like each column in the carousel to be the same width (equal to the width of the widest element in the columns) regardless of the content in each individual column.
I understand flexbox can do this with flex: 1 in each column, but only if the container has a fixed width. But, I want it to overflow. Is there a way to do this with just CSS?
.container {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
/* left: -100px; */
}
.col {
/* flex: 1; */
flex-grow: 1;
}
.item {
margin: 0.25rem;
background-color: red;
height: 100px;
width: 100px;
}
.fat {
width: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
</div>
</body>
</html>
CSS grid can do it. All you need is to set a column flow and make all the columns equal to 1fr. Due to the width calculation of absolute element I had to add a big negative margin to allow the element to grow as much as possible.
.container {
position: absolute;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
margin-right: -9999px;
}
.col {
border: 1px solid blue;
}
.item {
margin: 0.25rem;
background-color: red;
height: 100px;
width: 100px;
margin: auto;
}
.fat {
width: 200px;
}
<div class="container">
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item fat"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have multiple rows of a grid where there is text in one column and an image in the other. For every row the order is reversed so that i looks nice on desktop-mode. The HTML is rendered from a CMS, so the order is set by the user and is dynamic.
For mobile mode I would however always want to have the image on top, and then the text below. How can I rearrange my grid to do this on a media query?
I have a fiddle here on how it works on desktop, but no Idea how to do the media query to always get the image on top, and text below. Im guessing flexbox might be able to solve this somehow? All help greatly appreciated!
https://jsfiddle.net/3opref6L/
This code gets rendered by the CMS and might be longer or shorter.
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left;">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
</div>
</div>
</div>
This is a DYNAMIC SOLUTION with flexbox on top of the Bootstrap and This will work on any number of rows dynamically. Since Bootstrap is based on Flexbox itself, This solution worked for us.
UPDATE: Some fixes performed to override bootstrap specific CSS:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
#media (max-width: 768px) {
.container .row {
display: flex;
flex-direction: column;
}
.container .row:nth-child(2n-1) .col:first-child {
order: 2;
}
.container .row:nth-child(2n-1) .col:last-child {
order: 1;
}
}
#media (min-width: 769px) {
.container .row {
display: flex;
flex-direction: row !important;
}
.container .row .col:first-child {
order: 1;
}
.container .row .col:last-child {
order: 2;
}
}
/* Bug Fix */
#media (min-width: 576px) {
.col-sm-12 {
flex: 0 0 50% !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./OrderIssue.css" />
</head>
<body>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="col md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/200x200/000/fff" />
</div>
</div>
</div>
<div class="row">
<div class="col md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/200x200/000/fff" />
</div>
</div>
<div class="col md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
</div>
<div class="row">
<div class="col md-6 col-sm-12">
<div class="block htmlblock">
<p style="text-align: left">TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="col md-6 col-sm-12">
<div class="block image-block">
<img src="https://dummyimage.com/200x200/000/fff" />
</div>
</div>
</div>
</div>
</body>
</html>
Working correctly now.
if you use bootstrap 4 in this version of bootstrap used flex box to grid systems .
There are good features in Flexbox, one of which is the possibility of flex-direction . in this feature you can set row-reverse and resolve this problem.
Using a class is usually easier:
flex-sm-column-reverse flex-md-row
Example here: https://codepen.io/yasgo/pen/NWRgejr
I need to introduce a new class for make the same structure you want use class flex-row-reverse class with row. it works perfect as you want.
This is the small code to understand what I want to tell.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row mb-5">
<div class="col-md-4 col-sm-12">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="col-md-8 col-sm-12">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="row mb-5 flex-row-reverse">
<div class="col-md-4 col-sm-12">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="col-md-8 col-sm-12">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="row mb-5">
<div class="col-md-4 col-sm-12">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="col-md-8 col-sm-12">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
<div class="row mb-5 flex-row-reverse">
<div class="col-md-4 col-sm-12">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="col-md-8 col-sm-12">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
</div>
</div>
</div>
</body>
</html>
I have an HTML structure like this:
<div class="row">
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
</div>
where class 'row' has width: 100% of its parent and the parent width will change over time.
My goal is that the two divs with a "half-row" class must be in-line and occupy 50% of the "row" div. If the size of the "row" div goes below 640px (so the half-row will be < 320px) the two half-row class divs have to stack and each of them occupies 100% of the available space.
In both cases, the internal div ("cell" class) must equally divide the available space.
Every suggestion is welcome. Thank you
#S.C. is right, flexbox is the way to go and I would also recommend reading the CSS-tricks article! In fact I have used this very same article to construct this alternative example, that's independent of the screen-width:
.row, .half-row {
display: flex;
}
.row {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
}
.half-row {
width: 320px;
flex-grow: 1;
justify-content: space-around;
/* for seeing better what's going on */
background-color: #aaa;
border: 1px solid #333;
}
<div class="row">
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
</div>
You can use flexbox for that.
See excellent article from Css-tricks about Flexbox
If you want to tell us more about the cell class who need to divide the available space "equally" (Horizontally ? Vertically ? both ? Squared ? etc.) I'll update my code to fit with your needs.
I Hope this could help you.
.row {
display: flex;
width: 100%;
flex-flow: row wrap;
}
.half-row {
display: flex;
flex-flow: row; /* or column */
flex-basis: 100%;
/* remove after tests */
background-color: red;
height: 500px;
}
.cell {
flex-basis: 100%;
/* remove after tests */
background-color: blue;
}
#media screen and (min-width: 640px) {
.half-row { flex-basis: 50%; }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="row">
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
<div class="half-row">
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
<div class="cell">
..content..
</div>
</div>
</div>
</body>
</html>
There are three 33% divs next to eachother. The 1st is an empty div, the 2nd a div containing four images, and the 3rd empty div.
How do I responsively keep these 3 blocks the same height? I'm using Foundation 6.
.block {
background: grey;
}
.block, .imgBlock {
height: 200px;
}
.imgBlock .row .column{
padding: 0;
}
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
<div class="row small-up-3">
<div class="column block">
</div>
<div class="column imgBlock">
<div class="row small-up-2">
<div class="column">
<img src="http://placekitten.com/200/150"/>
</div>
<div class="column">
<img src="http://placekitten.com/200/150"/>
</div>
<div class="column">
<img src="http://placekitten.com/200/150"/>
</div>
<div class="column">
<img src="http://placekitten.com/200/150"/>
</div>
</div>
</div>
<div class="column block">
</div>
</div>
Use foundation equalizer js. Here is your code using foundation equalizer:
Code:
$(document).foundation();
.block {
background: grey;
}
.block,
.imgBlock {
height: 200px;
}
.imgBlock .row .column {
padding: 0;
}
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/plugins/foundation.equalizer.js"></script>
<div class="row small-up-3" data-equalizer>
<div class="column block" data-equalizer-watch>
</div>
<div class="column imgBlock" data-equalizer-watch>
<div class="row small-up-2">
<div class="column">
<img src="http://placekitten.com/200/150" />
</div>
<div class="column">
<img src="http://placekitten.com/200/150" />
</div>
<div class="column">
<img src="http://placekitten.com/200/150" />
</div>
<div class="column">
<img src="http://placekitten.com/200/150" />
</div>
</div>
</div>
<div class="column block" data-equalizer-watch>
</div>
</div>
My page contains a collection of elements, each element is a fixed height row. Within the row, the content block should fill only part of the row. This could be the entire row, only the left part, only the right part, or somewhere in the middle.
To draw this with html I was thinking of using two buffer divs (left and right side of the content). Note how wide the buffers are will be set programmatically (with angular) so does not need to be set on the CSS. This can just be hardcoded in the PLNKR with inline styles.
Here is my starting plnkr.
I asked a similar question here, but was only needing 3 variations for rows (left half, right half, full width), now I need more flexibility.
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me full width</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating left</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating right</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me in the middle</p>
</div>
<div class="right-buffer"></div>
</div>
The output will be similar to below, but in addition to having the option of floating the element to the right or left, it could float in the middle.
Used floats to put it right / left and margin:auto to center the div using:
.left{
float: left;
width: 33.33%;
}
.right{
float: right;
width: 33.33%;
}
.center{
margin: auto;
width: 33.33%;
}
.right-buffer {
clear:both;
}
(Added some border / padding for illustration)
/* Styles go here */
.employee-container {
margin-bottom: 6px;
margin-top: 6px;
border: 1px solid lightsteelblue;
}
.employee-container > div.content {
padding: 15px;
background-color: lightsteelblue;
}
.left{
float: left;
width: 33.33%;
}
.right{
float: right;
width: 33.33%;
}
.center{
margin: auto;
width: 33.33%;
}
.right-buffer {
clear:both;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me full width</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content left">
<p>Show me floating left</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content right">
<p>Show me floating right</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content center">
<p>Show me in the middle</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I hope I understood well your request. I've made it in Plunker with flexbox.
http://plnkr.co/edit/IxCupfRaXUWYlkVhsqga
<style>
.flex{display:flex;}
.flex > *{flex:1;padding:2px}
</style>
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me full width</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="flex">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating left with a very big text nd it will adjust automatically</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating right</p>
</div>
<div class="right-buffer"></div>
</div>
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me in the middle small text</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
</div>
</div>
</body>
Here is my Code and plunker link may be it can help you -
Link Plunker
HTML Code
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me full width</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="employee-container leftDiv">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating left</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="employee-container rightDiv">
<div class="left-buffer"></div>
<div class="content">
<p>Show me floating right</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 centeredDiv">
<div class="employee-container">
<div class="left-buffer"></div>
<div class="content">
<p>Show me in the middle</p>
</div>
<div class="right-buffer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS Code
.employee-container {
margin-bottom: 6px;
margin-top: 6px;
}
.employee-container > div {
padding: 3px;
background-color: lightsteelblue;
}
.centeredDiv{
position:relative;
}
.centeredDiv > .employee-container{
position:absolute;
width:50%;
left:25%;
}
.rightDiv{
width:50%;
float:right;
}
.leftDiv{
width:50%;
float:left;
}