I've got these posts which are images and output I'd like to stack in a column, but the divs are stuck on top of each other. I'd like to have them stacked with a bit of margin between them. How do you stack images with aligned output?
<hr />
<div id="listingwrapper">
<div style="float:left;">
<img src="gateway/imgs/stock/profilechick.jpg" />
</div>
<div style="float:left; width: 246px;">
<span style="color:white;"><b>Wicked awesome chick goes to the</b></span><br/>
</div><br/>
<div>
<span style="color:white;"><i>600 views</i></span>
</div>
</div>
<div id="listingwrapper" style="clear:both;">
<div style="float:left;">
<img src="gateway/imgs/stock/profilechick.jpg" />
</div>
<div style="float:left; width: 246px;">
<span style="color:white;"><b>Wicked awesome chick goes to the</b></span><br/>
</div><br/>
<div>
<span style="color:white;"><i>600 views</i></span>
</div>
</div>
try this demo here
#listingwrapper {
clear: both;
margin-top: 35px;
overflow: hidden;
}
Related
<div style="float: left;">
<img src="image.png"/>
<div style="font-size: 100px;">Health And Wellbeing</div>
</div>
When I run this code, the words appear underneath the picture, is there any way to make the words appear to the right of the text?
I am not sure why your container div has float: left; in its styles, but you can use Flexbox to arrange the contents with more flexibility.
Here's a simple example:
<div style="float: left; display: flex;">
<img src="https://picsum.photos/seed/picsum/200/300" />
<div style="font-size: 100px;">Health And Wellbeing</div>
</div>
Isn't it simple? Just put <img> after the words...
<div style="float: left;">
<div style="font-size: 100px;">
Health And Wellbeing
</div>
<img src="image.png" />
</div>
I have some boxes which are perfectly aligned in every way except they are different heights. I'd like the heights all the same. They align at the bottom, on the sides, with the edge of the page, but at the top they're all different heights. I'm happy with the layout, 3 x3 but how to get the heights all the same size.
Page: https://adsler.co.uk/find-an-event/
#media (min-width: 768px) {
.box-layout {
max-height: 100%;
}
}
<div class="line-layout" style="display: none;">
<li class="event_listing post-6985
type-event_listing status-expired
hentry" style="visibility:
visible;" data-latitude="" data- longitude="">
<div class="event-info-row-
listing">
<a href="https://adsler.co.uk/
event/new-cross-and-deptford-free-
film-festival/">
<div class="row">
<div class="col-
md-1">
<div class="organizer-logo">
<img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32ad1
4.jpg">
</div>
</div>
<div class="col-md-4">
<div class="event-title">
<h4>New Cross and Deptford Free Film Festival</h4>
<div class="boxes-view-
listing-
registered-code">
</div>
<div class="event-
organizer-
name">
<normal>Deptford Film Festival
<normal></normal>
</normal>
</div>
</div>
<div class="col-md-2">
<div class="date" <date>2019-05- 26
</date>
</div>
</div>
<div class="col-md-3">
<div class="event-
location"><i class="glyphicon
glyphicon-map-
marker"></i> London </div>
</div>
<div class="col-md-2">
<div class="event
ticket">#free</div>
</div>
<div class="col-md-3"></div>
</div>
</a>
</div>
</li>
</div>
<!-- Box Layout -->
<a class="event_listing post-6985
type-event_listing status-expired
hentry" href="https://adsler.co.uk
/event/new-cross-and-deptford-free-
film-festival/">
<div class="box-layout">
<div class="event-img"><img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32
ad14.jpg"></div>
<div class="boxes-view-box-
registered-code">
</div>
<div class="event-title">
New Cross and Deptford Free Film Festival
</div>
<div class="event-start-
date">2019- 05-26
</div>
<div class="event-location">
<i class="glyphicon glyphicon-
map-marker"></i> London </div>
<div class="box-footer">
<div class="event-
ticket">#free</div>
</div>
</div>
</a>
Didn't work.
The problem is with your img tag.
Your images are different heights so that you are having different heights of each box.
You have 2 choices:
1- make all images with same width and height(not that easy)
2- you should fix img height, try something like:
#content .entry-summary img.wp-post-image, #content .entry-content img {
height: 250px;
}
.box-layout {
width: 100%
}
this should work as you want.
note that will be some margin on the left and right of each image because of different dimensions.
screenshot after editing as above:
The heights of your boxes are being determined by the size of the images. Luckily, your images are wrapped in a containing div with the class event-img. So, instead of resizing all your images, you could simply give .event-img a max-height of shorter than any of your images, and set it's overflow: hidden
.event-img {
max-height: 190px;
overflow: hidden;
}
here is my code, I need to display a page with 3 images one is on the left and other two on the right side but all images are displaying in the same line, they are not displaying in order that I
List item
have given. please help me in solving these.
.leftAlign {
float: left;
}
.rightAlign {
float: right;
margin: 10px;
}
.rightOrder{
float: right;
margin: 10px;
}
.primary-button {
background-color: #109bd5;
color: white;
}
<div class="about-content">
<h4 mat-dialog-title>Hello World</h4>
<div mat-dialog-content>
<div class='leftAlign'>
<h4>IMAGE1</h4>
<img src="assets/images/image1.png">
</div>
<div class='rightAlign'>
<h4>IMAGE2</h4>
<img src="assets/images/image2.png">
</div>
<div class='rightOrder'>
<h4>ICON</h4>
<img src="assets/images/icon_img.png">
</div>
</div>
<div mat-dialog-actions align="end">
<button mat-button mat-dialog-close class="mat-button primary-button">close
</button>
</div>
</div>
<div style="display:flex;justify-content:space-between;">
<div>
<!-- This will be left aligned -->
<img src="https://via.placeholder.com/150?text=1" alt="image 1">
</div>
<div>
<!-- This will be right aligned -->
<div>
<img src="https://via.placeholder.com/150?text=2" alt="image 2">
</div>
<div>
<img src="https://via.placeholder.com/150?text=3" alt="image 3">
</div>
</div>
</div>
Please have look at this, if you are using Bootstrap, I will recommend using it instead of giving inline style.
I have a bunch of photos with different sizes and I would like to place texts on the left-hand corner and right-hand corner. How do I achieve this?
Here's the example code of what I'm trying to do.
http://jsfiddle.net/noppanit/29pGw/
<div class="content" id="panel_photos">
<p>POPULAR PHOTOS</p>
<div class="tweet_photo">
<img src="http://pbs.twimg.com/media/Bh_YPrmIMAAsiYE.jpg" />
<span class="twitter_name">#twitter_name</span>
<span class="someother">something_cool</span>
</div>
<div class="tweet_photo">
<img src="http://pbs.twimg.com/media/Bh-tD9iIUAAHU8-.jpg" />
<span class="twitter_name">#twitter_name</span>
<span class="someother">something_cool</span>
</div>
<div class="tweet_photo">
<img src="http://pbs.twimg.com/media/Bh7CEUwCcAAmy2C.jpg" />
<span class="twitter_name">#twitter_name</span>
<span class="someother">something_cool</span>
</div>
<div class="tweet_photo">
<img src="http://pbs.twimg.com/media/Bh6BqxkIIAAz0i4.jpg" />
<span class="twitter_name">#twitter_name</span>
<span class="someother">something_cool</span>
</div>
<div class="tweet_photo">
<img src="http://pbs.twimg.com/media/Bh5cDniIgAAhhsh.jpg" />
<span class="twitter_name">#twitter_name</span>
<span class="someother">something_cool</span>
</div>
<div class="tweet_photo">
<img src="http://pbs.twimg.com/media/Bh4idriCEAAIa2C.jpg" />
<span class="twitter_name">#twitter_name</span>
<span class="someother">something_cool</span>
</div>
</div>
<div> elements are block-level which fill the entire space of their containing block. You could float divs and then clear the float for each one to decrease the width of them up to their content as well as keep each one in a separate row.
Then simply use bottom/left and right properties to position the absolutely positioned elements within their containing block (the relatively positioned parent .tweet_photo) as follows:
.tweet_photo {
position: relative;
float: left;
clear: left;
}
.twitter_name {
position: absolute;
color: white;
bottom: 20px;
left: 20px;
}
.someother {
position: absolute;
right: 20px;
bottom: 20px;
color: white;
}
WORKING DEMO.
It seems it'd work. I don't know why... My description is too far over.
HTML
<div id="viewPhoto">
<div id="viewThumb">
<img src="$THUMBNAIL_URL$" /><br>
</div>
<div class="moderPanel" style="float:left">
$MODER_PANEL$
</div>
<div id="photo-information" style="float:right"> <strong>Description:</strong></div>
<br />
now I understand.
Try to do this:
<div id="viewPhoto">
<div id="viewThumb" style="float: left">
<img src="http://images.br.sftcdn.net/br/scrn/73000/73753/santos-5.jpg" />
</div>
<div id="photo-information" style="float:left; margin-left: 20px"> <strong>Description:</strong></div>
<div class="moderPanel" style="float:left; border:1px solid green; clear: left">
$MODER_PANEL$
</div>
Because you are putting the div in a float right way.
Try do to left using margin left. Like this:
<div id="photo-information" style="float:left; margin-left: 20px"> <strong>Description:</strong></div>
It's because your float:right CSS statement is causing ithe description to float to the right of your container element. Try using float:left together with a small margin like this:
<div id="viewPhoto">
<div id="viewThumb">
<img src="$THUMBNAIL_URL$" /><br>
</div>
<div class="moderPanel" style="float:left">
$MODER_PANEL$
</div>
<div id="photo-information" style="float:left; margin-left:15px;"> <strong>Description:</strong></div>
<br />
...