html - PHP Generated images aren't inheriting the styles of the containing div
Get the solution ↓↓↓When using Instagrams API to display the images on my website, the images aren't inheriting the containing divs style. The style being float:left. So they don't stack on top of each other, they actually appear in rows and columns... rather than just a column.
The CSS:
#instagram.img {
float:left;
margin:10px;
}
The HTML/PHP (omitting get data & parsing) :
<div class="instagram">
<?php foreach ($result->data as $post): ?>
<a class="group" rel="group1" href="<?= $post->images->standard_resolution->url ?>"><img src="<?= $post->images->thumbnail->url ?>"></a>
<?php endforeach ?>
</div>
I tested that, images outside of the php adhere to the styling and they do. They float:left as expected. Any help greatly appreciated.
Answer
Solution:
.instagram {
float:left;
margin:10px;
display: inline-block;
}
As I said in the comment,#
is the selector forid
,.
is the selector for class.
<div>
<?php foreach ($result->data as $post): ?>
<a class="group instagram" rel="group1" href="<?= $post->images->standard_resolution->url ?>"><img src="<?= $post->images->thumbnail->url ?>"></a>
<?php endforeach ?>
</div>
Add the.instagram
class to your<a>
, because adding it to your div will float the div left, and not the picture.
See display properties to see why thedisplay: inline-block;
.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: foreign key constraint is incorrectly formed laravel
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.