文章/答案/技术大牛

发布

社区首页 >问答首页 >可扩展div

问可扩展div
EN

Stack Overflow用户

提问于 2012-04-16 10:51:21

回答 2查看 411关注 0票数 0

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

我不能将div 1，3和div 2，4封装在单独的div中

这是我为div所用的样式：

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

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-04-16 10:57:17

这是float的一个问题。为此，您必须使用Js砌体。否则，您必须像这样定义您的标记：

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

票数 2

Stack Overflow用户

发布于 2012-04-16 11:11:47

下面会做你想要的。我将所有原始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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10172725

复制

相似问题

问可扩展div
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可扩展divEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可扩展div
EN