Geek Answers Handbook

Reorder Sibling DIVS

So, I have this HTML code with the following CSS.

HTML

<div class="secondpostholder"> <div class="rightsecond"> <h1> <a href="<?php the_permalink();?>" alt="<?php the_title();?>" title="<?php the_title();?>"> <?php the_title();?> </a> </h1> <div class="firstmetaholder"> <p class="secondentrymeta"> by <span class="secondauthormeta"> <?php the_author();?> </span> • <?php the_date(); ?> </p> <p class="secondentryexcerpt"> <?php $content = get_the_content(); echo wp_trim_words( $content , '30' ); ?> </p> <div class="secondreadmoreholder"> <a class="secondreadmorea" href="<?php the_permalink();?>" alt="<?php the_title();?>" title="<?php the_title();?>"> Read More </a> </div> </div> </div> <?php $background = wp_get_attachment_image_src( get_post_thumbnail_id( $page->ID ), 'TypeOne' ); ?> <div class="leftsecond" style="background-image: url('<?php echo $background[0]; ?>');"> <a class="leftseconda" href="<?php the_permalink();?>" alt="<?php the_title();?>" title="<?php the_title();?>"> </a> </div> </div>

CSS

 secondentry { display:inline-block; width:100%; } .secondentryholder { width:100%; max-width:1120px; margin:0 auto; position:relative; height:100%; } .secondpostholder { margin-bottom:60px; } .rightsecond{ width: 420px; right:0; position: absolute; margin-left:30px; } .secondpostholder { clear:both; } .leftsecond{ background: #222; float:left; width:calc(100% - 450px); min-height:400px; background-repeat:no-repeat; display:block; position:relative; background-position:center center; }

You can visit the website I'm working on to have a clear idea of ​​what's going on.

Once you have opened the website, change the browser window size to 600 pixels and view the second post (“We found love in a hopeless place”) to the sixth post (“Indisputable truth: what happens if you do not pay your credit” Card Card? ") And see what happens.

My problem is, is there a way in which the "leftsecond" DIV will be at the top of the "rightsecond" ?

I know that this is easy to do by changing the structure of the HTML BUT , please report that the original CSS style of the two divs is floating.

What I'm trying to achieve here is related to media queries, when the screen is large, two divs move to each other. There is no problem with the code for this. The problem is that the screen is small and I want to delete FLOATS , then the "leftsecond div" will be in TOP and the "rightecond div" in BOTTOM.

Two div do not have the same height. Only the "leftsecond" div has a fixed height. The edit length of a div is the height of the fluid, which changes according to its content.

+6
source share
2 answers

Alternative offer:

This one changes the structure of HTML , but there seems to be no way to avoid this, and this approach seems to fit your expectation of both large and small screen sizes.

  • When the screen size is large, two elements are located next to each other using div class='leftsecond' on the left and div class='rightsecond' on the right side.
  • When the screen size is small, the float is deleted, and they are displayed one by one, since they are already elements of the block.

 .rightsecond { width: 420px; float: right; margin-left: 30px; } .leftsecond { float: left; width: calc(100% - 450px); min-height: 100px; position: relative; background: url(http://lorempixel.com/500/100/nature/1); background-repeat: no-repeat; background-position: center center; } .secondpostholder { clear: both; border-top: 2px solid; } @media (max-width: 1000px) { .rightsecond, .leftsecond { width: 500px; float: none; position: relative; margin-left: 0px; } .secondpostholder { width: 500px; height: 100%; margin-bottom: 10px; } } 
 <div class="secondpostholder"> <div class="leftsecond" id="green"></div> <div class="rightsecond" id="blue"> Author: User X <br/>Date: 12-July-2015 <br/>Content: Blah blah <br/>Lorem ipsum dolor sit amet consectur... <br/>Read more <br/> </div> </div> <div class="secondpostholder"> <div class="leftsecond" id="green2"></div> <div class="rightsecond" id="blue2"> Author: User X <br/>Date: 12-July-2015 <br/>Content: Blah blah <br/>Lorem ipsum dolor sit amet consectur... <br/>Read more <br/> </div> </div> <div class="secondpostholder"> <div class="leftsecond" id="green3"></div> <div class="rightsecond" id="blue3"> Author: User X <br/>Date: 12-July-2015 <br/>Content: Blah blah <br/>Lorem ipsum dolor sit amet consectur... <br/>Read more <br/> </div> </div>

Original answer v2:

Since you stated that you have several such containers, and the size of the container is determined by the height its contents, you can use transform: translateY(-100%) for the second div, which will move it and the inverse transform ( transform: translateY(100%) ) on the first div that will move it down.

This would work with my initial assumption that the elements are the same size. A thin version of this approach would work if the elements at least had a fixed size, if not the same. But since one element has the size of a liquid , this approach will not work .

 .secondpostholder { width: 100%; height: 100%; position: relative; } .rightsecond { background: blue; width: 100px; height: 200px; transform: translateY(100%); } .leftsecond { background: green; width: 100px; height: 200px; transform: translateY(-100%); } 
 <div class="secondpostholder"> <div class="rightsecond" id="blue"></div> <div class="leftsecond" id="green"></div> </div> <div class="secondpostholder"> <div class="rightsecond" id="blue2">2blue</div> <div class="leftsecond" id="green2">2green</div> </div> <div class="secondpostholder"> <div class="rightsecond" id="blue3">3blue</div> <div class="leftsecond" id="green3">3green</div> </div>

Original answer v1:

If there was only one such block, we could use absolute positioning, as in the fragment below.

 .secondpostholder { position: relative; width: 100px; height: 100% auto; } .rightsecond { position: absolute; top: 200px; background: blue; width: 100px; height: 200px; } .leftsecond { position: absolute; top: 0px; background: green; width: 100px; height: 200px; } 
 <div class="secondpostholder"> <div class="rightsecond" id="blue"> </div> <div class="leftsecond" id="green"> </div> </div>
+5
source

If you resize the browser below 768 px, you can set the child children of the child node for relative positioning and remove the upper values. Change the order using a flexible box technique. This is supported by IE10 and other major browsers. It does not depend on the height of shared divs.

 .secondpostholder { width: 100px; height: 100% auto; position: relative; } .rightsecond { background: blue; width: 100px; height: 200px; position: absolute; top: 200px; } .leftsecond { background: green; width: 100px; height: 200px; position: absolute; top: 0px; } @media (max-width: 768px) { .secondpostholder { display: flex; display: -ms-flex; flex-direction: column; } .rightsecond { position: relative; order: 2; top: 0; } .leftsecond { position: relative; order: 1; } } 
 <div class="secondpostholder"> <div class="rightsecond" id="blue"> 1blue </div> <div class="leftsecond" id="green"> 1green </div> </div> <div class="secondpostholder"> <div class="rightsecond" id="blue"> 2blue </div> <div class="leftsecond" id="green"> 2green </div> </div> <div class="secondpostholder"> <div class="rightsecond" id="blue"> 3blue </div> <div class="leftsecond" id="green"> 3green </div> </div>
+1
source

More articles:


All Articles