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

我正试图用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>

A.
B
C
D

A元素位于B元素之前，以便在移动设备上实现此布局：

我试图在桌面上实现以下布局：

我不喜欢使用javascript，也不知道

.block

维度（它们的内容可能会有所不同）。因此，在B元素上，我既不能使用负数

边距

（因为我不知道块高度），也不能使用

位置：绝对

（因为B内容高度可能会溢出包装高度）。 我知道的是B块宽度，以像素为单位

遗憾的是，我不能使用CSS3或

我已经创建了一个用于HTML和CSS的

---

任何帮助都将不胜感激。

无需使用任何

定位

…使用您现有的标记，以下是您的工作

您只需使用

float

和

clear

在需要的地方将其清除即可

修改后的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在

>400px媒体查询中具有父div的完整高度，则

要更改的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*/

}

CSS的美妙之处在于它有多种方式。在这种情况下，您可以通过使用外部容器和浮动左键来保持简单：

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


B
A.
C
D


jsFIDLE:
如果您是css新手，无法使用外部样式表，请在桌面上使用以下代码：

 <div class ="wrapper1" style="float:left;width:200px;margin-right:10px;">
    <div class="b block" style="width:200px;height:200px;background-color:pink;">     
    B             
    </div>
 </div>

 <div class ="wrapper2" style="float:left;width:150px;
  background-color:gray;">
<div class="a block" style="width:200px;height:200px;
 background-color:yellow;">
    A
    </div>  
    <div class="c block" style="width:200px;height:200px;background-color:gold;">
    C
    </div>
    <div class="d block" style="width:200px;height:200px;background-color:purple;"> 
    D
    </div>
   </div>


B
A.
C
D
当B比包装器大时，您希望发生什么情况？包装器应始终包含B。我不能让B溢出：（抱歉，这看起来很棘手。我想我也可以接受“不可能”作为答案。我的意思是：包装可能会根据B的高度而变大，或者你希望它永远不会变大，因为ADC在一起（或者你使用了更多的块）？它可能会变大。包装高度应该根据最高的元素（.B或a+c+d）而变化.这么说这行得通吗？.作者@Danko@Danko：将代码更新为具有父div全高的B…最后我得到了一个答案b4 u！！：）对不起，.B块
宽度
是以像素为单位设置的，所以我不想使用百分比。是的，这里是：使用百分比解决方案很难在不同的视口中保持一致性。B列和A+C+D列之间的空白可能会有很大的不同。@Giulioboname:如果只需要使用
px
，则必须创建更多的突破点！！