重新排列兄弟 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，以清楚了解正在发生的事情。

打开网站后，将浏览器窗口的大小调整为 600 像素，然后查看第二个帖子 （“我们在一个绝望的地方找到了爱情”） 到第六个帖子 （“无可争议真相：如果您不支付信用卡账单会怎样？") 看看会发生什么。

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

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

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

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

Answer 1

替代建议：

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

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

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

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

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

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

如果只有一个这样的块，那么我们可以像下面的 sn-p 那样使用绝对定位。

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

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>