html – 如何在不知道元素高度的情况下将第二个元素定位到顶部

2023年12月13日 208次阅读

我试图用CSS来实现一件困难的事情.我有这个
HTML代码

<div class="wrapper">
    <div class="a block">A</div>
    <div class="b block">B</div>
    <div class="c block">C</div>
    <div class="d block">D</div>
</div>

一个元素在B之前在移动设备上实现这种布局：

我想要实现的是桌面上的以下布局：

我不想使用javascript,也不知道.block维度(其内容可能会有所不同).因此,在B元素上,我不能使用也不能使用负边距(因为我不知道A块高度),也不能使用position：absolute(因为B内容高度可能会溢出包装器高度).
我所知道的是B块宽度(以像素为单位).

可悲的是,我不能使用CSS3 flexbox或grid layout.

我创建了一个用于HTML和CSS的jsFiddle.

任何帮助将不胜感激.

最佳答案 没有使用任何定位…使用您现有的标记,这是您的working
demo

您只需要玩浮标并在需要的地方清除它们！

修改后的CSS

.a, .c,  .d {
    float:right;
    width:70%;
}

.b{
    float:left;
    width:28%;
    height:100%;
}


@media (max-width: 400px) {
   .a {
    float:right;
    width:100%;
}
  .d {
    clear:both;
    width:100%;
}

 .c,.b{
    float:left;
    width:49%;
    height:100%;
}

编辑

如果你希望B在>中具有父div的全高度400px媒体查询,然后是check this fiddle

要改变的CSS：

.wrapper, .table {
    position: relative;
    margin-bottom: 100px;
    border: 1px solid red;
    height:186px;/* if u want B to have full height of parent div in computer mode, then this must have a value in pixels*/

}
点赞