This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 7 years ago.
It is now like this:
I want like this:
my css:
.maindiv{
width:410px;
}
.innerdiv{
display: inline-block;
width: 200px;
height: auto;
}
JSFIDDLE
this is an example page
Here's an easy implementation ,just use display:flex on main div and make two columns div to wrap inner div
<div class="maindiv">
<div class="col-1">
<div class="innerdiv">
<img style="width: 100%; height: 200px;"/>
</div>
<div class="innerdiv">
<img style="width: 100%; height: 120px;"/>
</div>
<div class="innerdiv">
<img style="width: 100%; height: 220px;"/>
</div>
</div>
<div class="col-1">
<div class="innerdiv">
<img style="width: 100%; height: 260px;"/>
</div>
<div class="innerdiv">
<img style="width: 100%; height: 180px;"/>
</div>
</div>
</div>
css
.maindiv {
width: 410px;
display: flex;
}
Result
Related
[enter image description here][1]currently i am facing one problem.
I generated table using div with fix header and scrollbar to div row section.
but problem is both div are not taking whole 50% 50% width.
I have tried following code.but not working.
.brd2 {
height: auto;
max-height: 100px;
overflow: auto;
position: absolute;
width: 100%;
}
.back-clr {
background-color: red;
}
HTML PART
<div class="container">
<div class="row">
<div class="col-md-8">
<div style="display: table;width:100%">
<div style="display: table-row">
<div style="width:50%; display: table-cell;">
Test
</div>
<div style="width:50%; display: table-cell;">
test
</div>
</div>
<div class="brd2" style="display: table-row;">
<div class="content" style="width:50%; display: table-cell;">
<p>sdfds
fdsf</p>
<p>dsfds
fds</p>
<p> fds
fsf
dsf</p>
<p>sdfds
fdsf</p>
<p>dsfds
fds</p>
<p> fds
fsf
dsf</p>
</div>
<div class="content back-clr" style="width:50%;display: table-cell;">
this is second div
</div>
</div>
</div>
</div>
</div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 4 years ago.
.img_small {
width: 50px;
height: 50px;
}
.wrapper {
max-width: 600px;
}
<div class="wrapper">
<div class="reading_chat_left" align="left">
<div class="reading_chat_img" style="min-width: 50px; display: inline-block">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
</div>
<div class="reading_chat_left" align="right">
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
<div class="reading_chat_img" style="min-width: 50px; display: inline-block">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
</div>
QUESTION:
I want to make it like this:
In other words, move photo to the top of its div.
Regardless of change of width of window or other, I want to make it sticky aligned to the top line.
Maybe it's so easy or noob question, but need help.
Thanks for reading.
Use vertical-align: 'top' to align the image to the top. Check the working snippet
.img_small {
width: 50px;
height: 50px;
}
.wrapper {
max-width: 600px;
}
<div class="wrapper">
<div class="reading_chat_left" align="left">
<div class="reading_chat_img" style="min-width: 50px; display: inline-block;vertical-align:top">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
</div>
<div class="reading_chat_left" align="right">
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
<div class="reading_chat_img" style="min-width: 50px; display: inline-block;vertical-align:top">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
</div>
You should be use this simple trick.
Please add css like:
.reading_chat_left .reading_chat_img {
width: calc(50px - 100%);
float: left;
}
or give inline css in this class .reading_chat_text{float: left;}
Hope this help.
Let me know further clarification.
.img_small {
width: 50px;
height: 50px;
}
.wrapper {
max-width: 600px;
}
.reading_chat_left .reading_chat_img {
width: calc(50px - 100%);
float: left;
}
<div class="wrapper">
<div class="reading_chat_left" align="left">
<div class="reading_chat_img" style="min-width: 50px; display: inline-block">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
<div class="reading_chat_text" style="display:inline-block; width: 60%">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
</div>
<div class="reading_chat_left" align="right">
<div class="reading_chat_text" style="display:inline-block; width: 60%;
float: left;">
<div class="reading_chat_left_name">It goes down</div>
<div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>
</div>
<div class="reading_chat_img" style="min-width: 50px; display: inline-block">
<img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
</div>
</div>
I have a problem.
I would like to center three icons on a website like so:
http://prntscr.com/cte4kt
Including the text under it.
I have searched on google, but I had no good results.
If somebody could show a simple example that would be really greatfull.
this is what I tried:
<div class="testDiv">
<img style="width: 100px; height: 100px;" src="https://s21.postimg.org/jc5m4w0av/search.png">
<h3>Insert text</h3>
<h4>This is an actual test<br>
I really mean it lol.
</h4>
<img style="width: 100px; height: 100px;" src="https://s21.postimg.org/jc5m4w0av/search.png">
<h3>Insert text</h3>
<h4>This is an actual test<br>
I really mean it lol.
</h4>
<img style="width: 100px; height: 100px;" src="https://s21.postimg.org/jc5m4w0av/search.png">
<h3>Insert text</h3>
<h4>This is an actual test<br>
I really mean it lol.
</h4>
CSS:
http://pastebin.com/v0cc1cXg
Thankyou.
I think you already know some basic HTML/CSS stuff so I'd recommend you use some of popular front-end frameworks like Bootstrap or Zurb Foundation. It's almost copy/paste only thing.
You can use something like bootstrap or primercss which give you classes to add rows and columns to layout your content.
You could also create your own like the example I did here
<div class="container">
<div class="row">
<div class="col3 center">
<div class="inner-container">
<i>icon</i>
<div>text</div>
</div>
</div>
<div class="col3">
<div class="inner-container">
<i>icon</i>
<div>text</div>
</div>
</div>
<div class="col3">
<div class="inner-container">
<i>icon</i>
<div>text</div>
</div>
</div>
</div>
</div>
.container {
position: relative;
width: auto;
height: 200px;
}
.row {
width: 100%;
height: 100%;
}
.col3 {
float: left;
width: 33.3%;
height: 100%;
background: grey;
}
.inner-container {
position: relative;
top: 30%;
text-align: center;
}
Basically you need to create some type of layout container(width:100%) with three columns split by thirds(width:33.3%). Then inside each of those columns you position the contents with (text-align:center) to horizontally center align the content and vertically align it via something like top:30% or if you could also do an inline-block with vertical-align: middle.
I want to create a grid of images that first has a large featured image, then to it's right, has a grid of 4 (2 on each row).. and then underneath that, rows of 4 images at a time.
Loosely based on this design.
I think flexbox would probably be able to nail this one.
Say I have some markup like this
<div class="image-grid">
<div>
<img src="https://unsplash.it/1024/1024">
</div>
<div>
<img src="https://unsplash.it/1000/800">
</div>
<div>
<img src="https://unsplash.it/1100/1000">
</div>
<div>
<img src="https://unsplash.it/1120/1000">
</div>
<div>
<img src="https://unsplash.it/1130/1024">
</div>
<div>
<img src="https://unsplash.it/1101/1024">
</div>
<div>
<img src="https://unsplash.it/1020/1024">
</div>
<div>
<img src="https://unsplash.it/1021/1024">
</div>
<div>
<img src="https://unsplash.it/1002/1024">
</div>
<div>
<img src="https://unsplash.it/1003/1024">
</div>
<div>
<img src="https://unsplash.it/1004/1024">
</div>
<div>
<img src="https://unsplash.it/1005/1024">
</div>
</div>
with CSS
.image-grid {
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
}
.image-grid > div:first-child {
flex-basis: 50%;
}
.image-grid > div {
flex-basis: 25%;
}
this almost does what I need it to. Codepen here.
I need two things fixed though...
display 4 images to the right of the featured image, instead of the current 2.
stretch each image to fit it's space so it's a tight grid (no spacing around any image). I'm thinking of using the object-fit CSS property but I haven't got it working yet.
Thank you.
So I figured the easiest way would be to use a framework like Foundation to create the top row, and then use flexbox for the rest.
<div class="row">
<div class="medium-6 columns featured-image">
<img src="https://unsplash.it/1023/1024">
</div>
<div class="medium-6 columns featured-image-grid">
<div class="row">
<div class="medium-6 columns">
<img src="https://unsplash.it/1024/1024">
</div>
<div class="medium-6 columns">
<img src="https://unsplash.it/1022/1024">
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<img src="https://unsplash.it/1021/1024">
</div>
<div class="medium-6 columns">
<img src="https://unsplash.it/1020/1024">
</div>
</div>
</div>
</div>
<div class="image-grid">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1020/1025">
<img src="https://unsplash.it/1020/1022">
<img src="https://unsplash.it/1020/1021">
<img src="https://unsplash.it/1020/1029">
<img src="https://unsplash.it/1020/1028">
<img src="https://unsplash.it/1020/1027">
<img src="https://unsplash.it/1020/1023">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1020/1025">
</div>
with the CSS
.row {
max-width: 100%;
margin: 0 !important;
}
.columns {
padding: 0;
}
.featured-image img {
height: 400px;
}
.featured-image-grid img {
height: 200px;
}
img {
object-fit: cover;
width: 100%;
}
.image-grid {
display: flex;
flex-wrap: wrap;
}
.image-grid > img {
flex-basis: 25%;
height: 200px;
width: auto;
}
Codepen here.
It needs some work to make it responsive, but it works for what I needed it to do.
.image-grid {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 200px;
height: 100px;
}
.image-grid, .featured > img:first-child {
width: 100px;
height:100px;
}
.image-grid > img {
width: 50px;
height:50px;
}
<div class="image-grid featured">
<img src="https://unsplash.it/1024/1024">
<img src="https://unsplash.it/1000/800">
<img src="https://unsplash.it/1100/1000">
<img src="https://unsplash.it/1120/1000">
<img src="https://unsplash.it/1130/1024">
</div>
<div class="image-grid">
<img src="https://unsplash.it/1101/1024">
<img src="https://unsplash.it/1020/1024">
<img src="https://unsplash.it/1021/1024">
<img src="https://unsplash.it/1002/1024">
<img src="https://unsplash.it/1003/1024">
<img src="https://unsplash.it/1004/1024">
<img src="https://unsplash.it/1005/1024">
</div>
I'm trying to achieve the following layout for a search result box. Specifically a 100% width and height image that on the right has two stacked containers that equals the height of the image, each with differing background colours that are butted up right against the image.
All attempts to achieve this simple layout are failing miserably. The issue I keep hitting is the when using something like:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
The image doesn't quite fill the col-md-3 column completely and thus you see the column's background.
What's the best way to do this?
Bootstrap columns have a padding of 15px by default. Also the image width has to be 100%. You can do something like this:
<div class="search-result-box">
<div class="row">
<div class="col-md-3" style="padding: 0;">
<img src="" class="img-responsive" style="width: 100%;">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
Jsfiddle: http://jsfiddle.net/HM4gE/1/
I wouldn't use Bootstrap columns though to achieve this since you seem to have some fixed heights and widths for columns. Instead I would do it like this (given that the height and the width of the image is always 196px): http://jsfiddle.net/HM4gE/2/
Check browser support for calc() before using it: http://caniuse.com/calc
Here a possible answer:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196" />
</div>
<div class="col-md-9">
<div class="title">Title</div>
<div>Link1</div>
</div>
</div>
</div>
.search-result-box {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.row > * {
display: table-cell;
}
.col-md-3 {
background: orange;
width: 260px;
height: 196px;
}
.col-md-9 {
vertical-align:top;
background: grey;
}
.title {
background: #ccc;
width: 100%;
height: 150px;
}
http://jsfiddle.net/junkie/fAPQ6/2/