重新排列同级 DIVS

Question

所以我有这个 HTML 代码和下面的 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;
}

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

打开网站后，将浏览器 window 调整为 600px，然后查看第二个 post ("We found love in a hopeless place")第六个 post ("The Undisputed Truth: What Happens If You Don’t Pay Your Credit Card Bills? ") 看看会发生什么。

我的问题是，有没有办法让 "leftsecond" DIV 位于 [= 的顶部53=]?

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

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

两个div的身高不一样。只有 "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%)会将其向上移动，并在第一个 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:

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

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

重新排列同级 DIVS

Rearrange Sibling DIVS

html

css

media-queries