This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
Closed 4 years ago.
I'm trying to expand a DIV in a set of given DIVs for an image gallery, the issue I get is when I expend the specific DIV all the next ones get affected and move their positions which lets a big blank space that I don't want.
I tried the following CSS properties on the specific DIVs and none of them worked out so far :
height: 250px;
margin-bottom: 100px;
The css :
.thumb{
float:left;
margin:5px;
}
#gallery{
width:850px;
}
The html :
<html>
<head>
<title>asd</title>
</head>
<body>
<div id="gallery">
<div class="thumb">
<img src="https://picsum.photos/155/155?image=0">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=100">
</div>
<div class="thumb" style="height:250px;"> <!-- specific DIV to expand vertically !-->
<img src="https://picsum.photos/155/155?image=200">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=350">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=400">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=500">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=600">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=700">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=800">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=900">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=950">
</div>
<div class="thumb">
<img src="https://picsum.photos/155/155?image=990">
</div>
</div>
</body>
</html>
The result I'm getting :
The end result I want :
I made the fiddle so you can better see what's happening : https://jsfiddle.net/537ayfwc/
I found a workaround by adding an invisible DIV that would act as a seperating line after every 5 pics but I'm trying to find a way to do without it as it adds more constraints to the future javascript animations I would like to perform on the whole gallery.
Not sure if this is what you're looking for.
.thumb{
float:left;
margin:5px;
}
#gallery{
width:850px;
display: flex;
flex-wrap: wrap;
}
Related
It's an know issue that "with fluidly sized images, before the images load, the image containers initially appear collapsed."
I've fixed the issue for banner image and product images adding div and using this css hack:
height: 0;
overflow: hidden;
padding-bottom: 66.6%;
position: relative;
But can't understand how to fix it for awards icons block.
Firstly image containers initially appear collapsed, than it's loading one big icon, than 2nd, than resize them - would like it to know correct sizes before hand so it will look smooth to the eye.
Here is the screen recording of the issue
Here is pen for award icons block > https://codepen.io/anon/pen/borJXK
HTML
<div class="awards-memberships-container" data-modal="#awards-memberships-modal">
<div class="awards-memberships">
<div class="item">
<img src="http://via.placeholder.com/188x132"/>
</div>
<div class="item">
<img src="http://via.placeholder.com/146x146"/>
</div>
<div class="item">
<img src="http://via.placeholder.com/204x133"/>
</div>
</div>
</div>
CSS
img{vertical-align:bottom;}
body section img{max-width:100%;height:auto;}
.awards-memberships-container{background:#FFF;border-bottom:1px solid #ccc;cursor:pointer;}
.awards-memberships{display:flex;padding:5px 15px;}
.awards-memberships .item{padding:0px 10px;}
Try this and tell me how it goes.
body section img {max-width:100%;height:auto;}
.awards-memberships-container {background:#FFF;border-bottom:1px solid #ccc;cursor:pointer;}
.awards-memberships {display:flex;justify-content:center;align-items:center;padding:5px 15px;}
.awards-memberships .item {padding:0px 10px;}
.awards-memberships .item img {display:block;width:auto;height:auto;max-width:100%;}
<div class="awards-memberships-container" data-modal="#awards-memberships-modal">
<div class="awards-memberships">
<div class="item">
<img src="http://via.placeholder.com/188x132" alt="img1">
</div>
<div class="item">
<img src="http://via.placeholder.com/146x146" alt="img2">
</div>
<div class="item">
<img src="http://via.placeholder.com/204x133" alt="img3">
</div>
</div>
</div>
This question already has answers here:
Float 2 elements side by side inside a container div
(2 answers)
Closed 3 years ago.
I have loop that goes trough all pictures that I have and displays them. I would like to display them in one row, from left to right, but with css that I have is displaying them one under other. I have use flow but not sure if I used it correctly.
Here is my code:
.column.is-narrow {
float: right;
}
.box {
float: right;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
I am aware that my css is not correct I have been searching for answer but couldn't find it.
Basically, when you float things, they'll still wrap if there isn't enough space to display both side by side. The easiest solution is to set a width on them to ensure that their container will always be wide enough to fit the content. You can do it with percentages or pixels, depending on your use case.
Note: If you use percentages, percentages adding up to 100% may still cause it to wrap, because they may not take into account padding, margin and/or border depending on other things. I usually do something like 49% for both, then float one right and one left.
You may use display and mind this inline-style <div class="box" style="width: 200px;"> wich is to start with, not wide enough to hold texts and img side by side
display:table/table-cell;
.column.is-narrow {
float: right;
}
.box {display:table;}
.box> p, .box> figure {display:table-cell;vertical-align:middle/* or top or else */
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
display:flex;
.column.is-narrow {
float: right;
}
.box {
display: flex;
/* removed width:200px from inline-style*/
}
p {
margin: auto;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
The easiest way is to declare the parent div as a flex container by setting the property display: flex and flex-direction:row. If you don't want to wrap your pictures, you can set flex-wrap:nowrap.
Here http://the-echoplex.net/flexyboxes/ is nice playground for flex box.
So I found the answer and it was pretty simple :)
I just had to add one more div with class with which I will float it to left. This is what I wanted:
.html
<div class="column">
<div class="columns">
<div class="float" ng-repeat="a in $ctrl.f"> /* added this line of code */
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
</div>
</div>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
.css
.float{
float:left;
}
That was it. It's working. :)
I recently asked a question that a is kind of related to this but I still need some help. Now that I have that part done, I would like to know how I can make this images fit the size of the browser within their respective divs. Therefore the page would just be the 3 images side by side, no scroll up or down. I thought that having a "container fluid class would help me in this respect but it hasn't. I don't care about the quality of the images in terms because I will be using very hi-def photos, but if there is anything that I should keep in mind in this respect please feel free to notify me. Here is the code so far:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
</div>
</div>
</div>
You can add some classes to your html :
<div class="imageContainer container-fluid">
<div class="row">
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
</div>
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
</div>
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
</div>
</div>
And some css:
.imageContainer {
height:100%;
position:fixed;
}
.imageContainer .row, .imageContainer .ImageColumn {
height:100%;
padding:0;
}
.imageContainer .ImageColumn img {
width:100%;
height:100%;
}
here is the Fiddle
But I must warn you the result with real photos can look bad because of image stretch: Example
UPD:
as suggested in comments - you can change class to col-xs-4 so it would behave the same on all devices.
UPD 2:
I added something similar like Ihover square effect 4 but without rotation.
It required quite a change in css transitions.
Here is the example:
Link
I'm a visual designer, so this may seem a silly question (and at one point, this wasn't broken!) but I'm stuck. I'm trying to get images to appear in a responsive row with a mouseover.
Can anyone help? I know the code is jacked; I've been struggling with the order of the divs. The mouseover is working, BUT the images are now stacking and aren't appearing in a row anymore. They're outside of the col-lg-4 container, but I've included that. What am I missing?
*image is FPO
/// HTML:
<div class="col-lg-12">
<div class="highlight">
<h3>LOREM IMPSUM DOLAR</h3>
<h5>The fox and the rabbit.</h5>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<figure class="cap-left">
<div class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
<figcaptions><h4>Please let this work</h4></figcaptions>
</div>
</figure>
</div>
</div>
<div class="col-lg-4">
<figure class="cap-left">
<div class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
<figcaptions><h4>Please let this work</h4></figcaptions>
</div>
</figure>
</div>
</div>
/// JSFiddle:
http://jsfiddle.net/zvcNa/
This is due to your padding: 30px 40px; for figcaptions{}.
figcaptions is 100% width and height, but add your padding to this size.
Remove this padding and add it to your figcaptions children :
figcaptions h4{
padding:30px;
}
FIDDLE
EDIT #1:
Replaced :
figure {
display: block;
position: relative;
}
.col-lg-4 {
display:block;
float:left;
}
FIDDLE
I am wondering which is the best way to put spaces in between these 3 images with CSS using Bootstrap 3 RC2 as what I have done at the moment is not auto-resizing the images, even though I have set the width to auto in my #picture id tag. I wish for them to b inline and resize the images accordingly.
Here is my markup:
<div class="container">
<div class="row">
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
<div class="col-lg-4">
<img src="http://placehold.it/350x250" id="picture" />
</div>
</div>
</div>
CSS:
.container {
max-width:1000px;
background-color:white;
}
body {
background-color:cyan
}
#picture {
width:auto;
/*margin-left:10px; */
/*margin-right:10px; */
}
.col-lg-4 {
margin-left:10px;
margin-right:10px;
}
Check my Fiddle for a clearer view. Is there a better way to go about handling this?
Remove your own CSS for .col-lg-4: these margins may screw up the Bootstrap CSS. Next to that, these columns are only visible when your screen width is bigger than 1200 px.
Add the following classes to your divs: .col-xs-4 .col-sm-4 and .col-md-4, and give images a class="img-responsive" attribute.
It should work now as you wish.
As Harm Wellink mentioned, remove your css. You should only need the following html. Notice the "col-xs-4" and the "img-responsive" class. You do not need col-sm-4, col-md-4, col-lg-4 if you intend to have the 3 columns on all screen sizes.
<div class="container">
<div class="row">
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture1" class="img-responsive" />
</div>
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture2" class="img-responsive" />
</div>
<div class="col-xs-4">
<img src="http://placehold.it/350x250" id="picture3" class="img-responsive" />
</div>
</div>
If I understand your question right, you would like to show these pictures in a horizontal line, with a certain amount of space in between the pictures ?
First of all to get the DIV's in line change the following
.col-lg-4 {
display: inline-block;
}
try to specify a width for your container and row (e.g. 100%) and then your divs holding the pictures. Hope this helps you out?