html - 重新排列同级 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，然后查看第二篇文章 (“我们在绝望的地方找到了爱”) 到第六篇文章 (“无可争议的真相:如果您不支付信用卡账单会怎样？”) 看看会发生什么。

我的问题是，有没有办法让 "leftsecond" DIV 位于 "rightsecond" 的顶部？

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

我在这里试图实现的是与媒体查询相关的，当屏幕很大时，两个 div 相互 float 。这个代码没有问题。问题出在屏幕很小并且我想删除 FLOATS 时，“leftsecond div”将位于顶部，“rightsecond div”位于底部。

两个 div 的高度不同。只有“leftsecond”div 具有固定高度。右边的第二个 div 有一个流体高度，它会根据它的内容而变化。

Answer 1

备选建议:

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

• 当屏幕尺寸较大时，两个元素并排 float ，div class='leftsecond' 位于左侧，div class='rightsecond'在右边。
• 当屏幕尺寸较小时， float 将被移除，它们会一个接一个地显示，因为它们已经是 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>

---

原始答案 v2:

既然您已经声明您有多个这样的容器，并且容器大小由其内容的高度决定，您可以使用transform: translateY(-100%) 在第二个 div 上将其向上移动，在第一个 div 上进行反向转换 (transform: translateY(100%)) 将其向下移动。

这符合我最初的假设，即元素大小相同。如果元素至少具有固定大小(如果不相同)，则此方法的调整版本会起作用。但由于一个元素具有流动大小，这种方法行不通。

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

---

原始答案 v1:

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

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