Question

当 div 1 扩展时，我遇到了解决如何让 div 4 保持相同位置的问题。所有div都向左浮动，当我展开 div 1 以展开 div 2 时，也会扩展，在2到4之间留下一个空格。

我无法在单独的div中包装 div 1,3 和 div 2,4

example

这是我用于div的样式：

 .subcatagory {
    float: left;
    width: 150px;
 }

Answer 1

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

选中此http://jsfiddle.net/XhMtK/1/

Answer 2

以下内容将满足您的需求。我将所有原始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>

可扩展的div

2 个答案: