我正在尝试用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元素上,我不能使用也不能使用负margin
(因为我不知道块高度),也不能使用position: absolute
(因为B内容高度可能会溢出包装器高度)。
我所知道的是B块宽度(以像素为单位)。
可悲的是,我无法使用CSS3 flexbox或grid layout。
我创建了一个jsFiddle用于HTML和CSS。
任何帮助将不胜感激。
答案 0 :(得分:2)
不使用任何positioning
...使用您现有的标记,这是您的工作 demo
您只需要在需要的地方使用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 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>