当div 1展开时,我无法弄清楚如何让div 4保持相同的位置。所有的 div 都向左浮动,当我展开div 1以展开div 2时也会展开,在 2 和 4 之间留下一个空白空间。
我不能将div 1、3和div 2、4包装在单独的 div 中
这是我用于 div 的样式:
.subcatagory {
float: left;
width: 150px;
}
当div 1展开时,我无法弄清楚如何让div 4保持相同的位置。所有的 div 都向左浮动,当我展开div 1以展开div 2时也会展开,在 2 和 4 之间留下一个空白空间。
我不能将div 1、3和div 2、4包装在单独的 div 中
这是我用于 div 的样式:
.subcatagory {
float: left;
width: 150px;
}
这是float的问题。为此,您必须使用Js masonry。否则你必须像这样定义你的标记:
<div class="parent">
<div class="long">1</div>
<div>3</div>
</div>
<div class="parent">
<div>2</div>
<div>4</div>
</div>
以下将做你正在寻找的东西。我将所有原始 div 包裹在一个外部 div 中,设置它的宽度,使其只能容纳 2。然后我分类两个 div,类别(div1 和 div3 属于此类)和子类别,它们左右浮动。下面是一些代码来演示:
<html>
<head>
<style type="text/css">
#dvMain{
width:305px;
}
.subcategory, .category{
width: 150px;
border:solid black 1px
}
.subcategory{
float: right;
}
.category {
float: left;
}
</style>
</head>
<body>
<div id="dvMain">
<div id="dv1" class="category">1asadssadsad
sadsa
ds
adsad
sa
dsadsadsadsa
</div>
<div id="dv2" class="subcategory">2</div>
<div id="dv4" class="subcategory">4</div>
<div id="dv3" class="category">3</div>
</div>
</body>
</html>