所以我有以下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的流体高度根据其内容而变化。
答案 0 :(得分：4)
替代建议：
此确实会改变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>
答案 1 :(得分：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>