重新排列同级div

2022-03-01 00:00:00 html css media-queries

所以我有此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，以便清楚地了解正在发生的情况。

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

我的问题是，是否有办法在"LeftSecond"DIV中位于"Right Second"的顶部？

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

我在这里尝试实现的是与媒体查询相关的，当屏幕较大时，两个div彼此浮动。这个的代码没有问题。问题出在屏幕很小并且我要删除浮动时，"leftSecond div"将位于顶部，"rightSecond div"位于底部。

这两个div不具有相同的高度。只有"LeftSecond"div有固定的高度。右侧第二个div具有随其内容而变化的液体高度。

解决方案

备用建议：

此确实会更改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>

相关文章