Jump to content
newcoder1010

How to float child items

Recommended Posts

Hello,

HTML:

<div class="carousel-inner">

<div class="item active">
<img class="home-img-slideshow" title="Slide 2" alt="Slide 2" src="1.jpg">
<div class="carousel-caption">
<h4>
<a href="http://drupal-8-6-5.dd:8083/node/11">Slide 1</a></h4>
<p>teaser 1... </p>
</div>
</div>

<div class="item ">
<img class="home-img-slideshow" title="Slide 2" alt="Slide 2" src="2.jpg">
<div class="carousel-caption">
<h4>
<a href="http://drupal-8-6-5.dd:8083/node/11">Slide 2</a></h4>
<p>teaser 2... </p>
</div>
</div>

</div>

I would like to place text inside first carousel-caption to left and place text inside second carousel-caption to the right. I have done the following but it is not working. 

CSS:

.carousel-caption:nth-child(1) {text-align:left;}
.carousel-caption:nth-child(2) {text-align:right;}

Please advise.

Edited by newcoder1010

Share this post


Link to post
Share on other sites

It does not work like that!

That will attempt to find elements within the parent element (.item) with class '.carousel-caption', since there is only one only that can be targeted that is treated as second-child as the first is the image

So you need to target the parent div's with class '.item' nth-child() as you then with you original code , THEN target that child class instead

.item:nth-child(1) .carousel-caption {text-align:left; background: red;}
.item:nth-child(2) .carousel-caption {text-align:right;background: lime;}

The background colour will give  you a clearer idea how they work and show if they are working or not.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...