重新排列同级DIVS

Question

所以我有以下CSS的HTML代码。

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;
}

您可以访问the website，我正在努力清楚地了解正在发生的事情。

打开网站后，将浏览器窗口调整为600px并查看第二篇帖子（＆＃34;我们在无望的地方发现了爱情＆＃34;）到第六篇帖子（＆＃34;无可争议的真相：如果你不支付信用卡账单会发生什么？＆＃34;），看看会发生什么。

我的问题是，有没有办法在＆＃34; leftsecond＆＃34; DIV位于＆＃34; rightsecond＆＃34;

我知道这可以通过修改HTML结构轻松完成但请注意，两个div的原始CSS样式是浮动的。

我在这里尝试实现的是媒体查询，当屏幕很大时，两个div互相浮动。这个代码没问题。问题出在屏幕很小的时候我要删除 FLOATS 然后删除＆＃34; leftsecond div＆＃34;将是TOP和＃34;右边第二个＆＃34;在BOTTOM。

两个div不具有相同的高度。只有＆＃34; leftsecond＆＃34; div具有固定的高度。右秒div的流体高度根据其内容而变化。

Answer 1

替代建议：

此确实会改变HTML结构，但似乎没有任何方法可以避免它，这种方法似乎符合您对大屏幕和小屏幕尺寸的期望。

• 当屏幕尺寸较大时，两个元素会相互浮动，左侧为div class='leftsecond'，右侧为div class='rightsecond'。
• 当屏幕尺寸很小时，浮动被移除，它们会一个接一个地显示，因为它们已经是块元素。

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

原始答案v2：

由于您已声明您拥有多个此类容器且容器大小由其内容的height确定，因此您可以在第二个div上使用transform: translateY(-100%)来移动它并且在第一个div上进行反向变换（transform: translateY(100%)），将其向下移动。

这可能与我最初假设元素大小相同有关。如果元素至少具有固定大小（如果不相同），则该方法的调整版本将起作用。但由于一个元素具有流体大小，这种方法不起作用。

＆＃13;

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

原始答案v1：

如果只有一个这样的块，那么我们可以使用绝对定位，如下面的代码片段。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="secondpostholder">
  <div class="rightsecond" id="blue">
  </div>

  <div class="leftsecond" id="green">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

当您将浏览器的大小调整为768像素以下时，您可以将子兄弟div设置为具有相对定位并删除最高值。使用灵活的盒子技术更改订单。 IE10和其他主流浏览器支持此功能。 这不依赖于兄弟div的高度。

.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>