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

时间:2013-12-19 14:47:14

标签: html css

我正在尝试用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之前在移动设备上实现这种布局: mobile layout

我想要实现的是桌面上的以下布局: desktop layout

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

可悲的是,我无法使用CSS3 flexboxgrid layout

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

任何帮助将不胜感激。

3 个答案:

答案 0 :(得分:2)

不使用任何positioning ...使用您现有的标记,这是您的工作 demo

您只需要在需要的地方使用floatclear进行游戏!

修改后的 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 media query时拥有父div的完整高度,那么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*/

}

答案 1 :(得分:0)

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>

JSFiddle:http://jsfiddle.net/8spqs/

答案 2 :(得分:0)

如果您不熟悉css并且无法使用外部样式表,请使用以下代码进行DESKTOPS:

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