I'm trying to have a flex-col, where the image goes first. However, the code below will only change the order when the flex direction is row(image on left). It will not work on row.
</head>
<body>
<div class="flex-row">
<div class="order-2">
<h1>Flying Kites</h1>
<h2>Subheader</h2>
</div>
<img class="order-1" src="/examples/images/kites.jpg" alt="Flying Kites">
</div>
</body>
</html>
In order to have classes order-x work, the parent element needs to be flex:
<div class="flex">
<div class="order-2">
<h1>Flying Kites</h1>
<h2>Subheader</h2>
</div>
<img class="order-1" src="/examples/images/kites.jpg" alt="Flying Kites">
</div>
See live example: https://play.tailwindcss.com/AFxRfm5JjN
See doc usage: https://tailwindcss.com/docs/order#usage
In order to flex the div, the parent class must be 'flex' for it to work.
Related
Suppose I have a block of code that looks like this.
<div class="lv1">
<div class="lv2">
<div class="img">
</div>
<div id="text-on-image"> // <-- I want to grab this div element.
</div>
</div>
<div class="lv2">
</div>
</div>
Now I have $(this).eq(0) which refers to the root div element.
<div class="lv1"> //<-- $(this).eq(0) is here.
<div class="lv2">
<div class="img">
</div>
<div id="text-on-image">
</div>
</div>
<div class="lv2">
</div>
</div>
$(this).eq(0).children().eq(0) now refers to first div of lv2 class div.
<div class="lv1">
<div class="lv2"> // <-- $(this).eq(0).children().eq(0) is here
<div class="img">
</div>
<div id="text-on-image">
</div>
</div>
<div class="lv2">
</div>
</div>
$(this).eq(0).children().eq(0).children().eq(1) now refers to the correct div I want.
<div class="lv1">
<div class="lv2">
<div class="img">
</div>
<div id="text-on-image"> // <-- $(this).eq(0).children().eq(0).children().eq(1) is here
</div>
</div>
<div class="lv2">
</div>
</div>
Notice how the selecting child node became very messy for my code.
"$(this).eq(0).children().eq(0).children().eq(1)"
Is there a better way to go about doing the same work?
Use:
$("#parent").find(".children") for all children (deep traverse)
or:
$("#parent").children(".children") for immediate children
Since you use an ID, and an ID must be unique - simply use $("#text-on-image")
Otherwise, use the .find() Method.
If you used id, you can select it right away.
$("#text-on-image")
id must be unique, so if you use class, you can use ".find()"
$(".lv1").find(".text-on-image")
If no id or class is specified, selectors can be used.
$(".lv1 > .lv2 > div:nth-child(2)")
I want to set my code to auto-calculate equal height in inside of .col, because for example inside .col I have <h2> and <p> which could have different number of rows, so height of this element will be different for every .col, I would like to get same height for all rows inside .col.
I tried to use flexbox utilities, but I didn't find a solution, so I am wondering if grid will help me get what I want to get, but I don't know if display: grid inherits height of flexbox elements?
Here is my code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Projektowanie <b>stron</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/projektowanie-stron.jpg" class="img-fluid" alt="Projektowanie stron">
</div>
<p>Projektowanie oraz tworzenie serwisów internetowych.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Pozycjonowanie <b>stron</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/pozycjonowanie-stron.jpg" class="img-fluid" alt="Pozycjonowanie stron">
</div>
<p>Zwiększ pozycję swojej strony www w wynikach wyszukiwania.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Outsourcing <b>IT</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/outsourcing-it.jpg" class="img-fluid" alt="Outsourcing IT">
</div>
<p>Outsourcing informatyczny Profesjonalna opieka informatyczna dla firm.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/jRweow
I thought about using display: grid to .header-bottom-box and equal height of inside element.
EDIT
I tried to use GIRD:
And it works like I want to, but I don't know why I get this white space, how to delete it?
this is normal sir,
this all happen because of last col. text is less then first and second.
I have two sections -> hero and teaser, and in the teaser section i need make the teasers pictures appear just a bit upon the hero section, but z-index, position relative and top -1 is not working, i believe this is happening because i am using overflow: hidden, i already try use z-index but is not working.
The code is a bit extensive, so i create a codepen.
This is what i want:
This is what is happening:
I cant use CSS3, just 2, unfortunately..
HTML:
<section class="hero">
</section>
<section class="teasers">
<div class="container">
<div class="teaser">
<img class="teaser__image" src="public/images/main/teasers/pubcrawl.jpg" />
<div class="teaser__content">
</div>
</div>
<div class="teaser">
<img class="teaser__image" src="public/images/main/teasers/diversao.jpg" />
<div class="teaser__content">
</div>
</div>
<div class="teaser">
<img class="teaser__image" src="public/images/main/teasers/crawlers.jpg" />
<div class="teaser__content">
</div>
</div>
<div class="teaser">
<img class="teaser__image" src="public/images/main/teasers/staff.jpg" />
<div class="teaser__content">
</p>
</div>
</div>
</div>
</section>
Your .container has a style of overflow:hidden if you remove that you can see the overflow...
Updated codepen: http://codepen.io/anon/pen/JoBgER
I need to target each last <div> before each <h3>. Is there a programatic way this can be done in css?
For other reasons, I can not / don't want to target <h3> instead.
<div id="main">
<h3>Title</h3>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
<h3>Title</h3>
<div class="post">…</div>
<div class="post">…</div>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
<h3>Title</h3>
<div class="post">…</div>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
</div>
Actually this isn't possible.
If you are able to wrap the blocks into parent tags you can get each last child by CSS selectors #main .post:last-child:
<div id="main">
<div> <!-- wrap with "h3" WORKS -->
<h3>Title</h3>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
</div>
<h3>Title</h3>
<div> <!-- wrap without "h3" also WORKS -->
<div class="post">…</div>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
</div>
</div>
Note: The :last-child selector is not supported in IE8 and earlier versions.
What do you mean with: "For other reasons, I can not / don't want to target instead."?
jQuery workaround will work exactly like you want it with your original markup:
var $Main = jQuery('#main');
$Main.find('h3').prev().add( $Main.find(':last') ) //.text('<!-- Target this div-->');
At some point in the future, when selectors level 4 are implemented:
#main div:not(:has(+ div))
HTML
<div id="outer_div" style="overflow:auto; width:1238px; height:310px;">
<div id="inner_div" style="height:300px;">
<div id="child1" style="width:400px;">
</div>
<div id="child2" style="width:400px;">
</div>
<div id="child3" style="width:300px;">
</div>
<div id="child4" style="width:500px;">
</div>
<div id="child5" style="width:300px;">
</div>
<div id="child6" style="width:600px;">
</div>
</div>
</div>
What I want is the inner_div's width should go beyond the outer_div and child divs will remain on same line. I am adding child divs into inner_div by using jquery prepend and append method. Currently the maximum width inner_div is taking the width of outer_div and after that the line breaks.
I tried with display:inline-block, overflow:auto; and width:auto on inner_div but its not working.
Currently I am getting it to work using jquery by adding width dynamically to inner_div as I am dynamically adding child divs into inner_div. I would like to achieve it using css if possible.
Use table and table-cell properties to achieve this.
#inner_div{display:table;}
#inner_div div{display:table-cell;}
DEMO
you should use min-width on outer_div and float(or display:inline-block) on children of inner_div .
or use position absoulote on inner_div:
<div id="outer_div" style="min-width:1238px; height:310px">
<div id="inner_div" style="height:300px;">
<div id="child1" style="width:400px;display:inline-block">
</div>
<div id="child2" style="width:400px;display:inline-block">
</div>
<div id="child3" style="width:300px;display:inline-block">
</div>
<div id="child4" style="width:500px;display:inline-block">
</div>
<div id="child5" style="width:300px;display:inline-block">
</div>
<div id="child6" style="width:600px;display:inline-block">
</div>
</div>
</div>
or if you want fixed width of outer_div you can use position:
<div id="outer_div" style="width:1238px; height:310px;position:relative;white-space: nowrap;">
<div id="inner_div" style="height:300px;position:absolute; top:0 ">
<div id="child1" style="width:400px;display:inline-block">
</div>
<div id="child2" style="width:400px;display:inline-block">
</div>
<div id="child3" style="width:300px;display:inline-block">
</div>
<div id="child4" style="width:500px;display:inline-block">
</div>
<div id="child5" style="width:300px;display:inline-block">
</div>
<div id="child6" style="width:600px;display:inline-block">
</div>
</div>
</div>
by display table , inner_div can't get width larger than 1238!
also, I think , you can't add new element by css!