定位div

Question

我正在使用Jquery手风琴。所以我的代码是这样的：

<h3><a href="#">Test </a></h3>
<div class="accordion" style="background-color:yellow;">
   <div class="test_1">
      my first dynamic content div
   </div>
   <div class="test_2">
      my second dynamic content div
   </div>
</div>

所以你看到H3就是'手风琴'，如果我点击那个div手风琴打开里面有2个单独的div。这一切都有效，但我的2个div在手风琴div中的定位失败了。我想让它们在彼此之下，但两个div都是动态生成的，这意味着我不知道第一个div（test_1）的大小，所以我无法定位像素。我已经尝试了一些br标签等但似乎没有任何工作。有没有办法在css中执行此操作，可能使用float或其他内容，还是应该在html中完成？还有其他想法吗？

此致

Ť

Answer 1

我认为你可以通过css处理这个问题

第一种方法在手风琴类

下的任意div 上设置恒定宽度规则

.accordion div {
     width:150px;or 100% up to your design
}

第二种方法是为你的div设置一个等级，即

.w150px {
     width:150px;or 100% up to your design
}

但这次你应该将你的css类添加到test

中

<div class="test1 w150px"> ...

最诚挚的问候 迈拉

Answer 2

我认为如果你使用无序列表而不是div，那么事情可能会落到实处。

<h3><a href="#">Test </a></h3>
<ul class="accordion" style="background-color:yellow;">
   <li class="test_1">
      <p>my first dynamic content div</p>
   </li>
   <li class="test_2">
      <p>my second dynamic content div</p>
   </li>
</ul>

Answer 3

我用更多代码解释得更好一些：

我们举一个例子，我有4个动态创建的元素。我在'accordian'div中有2个div，如之前发布的那样是test_1和test_2。每个div可以有3个动态创建的元素。因此，在第一个div test_1中将有3个div（因为有3个元素）并且在div test_2中将有1个div（第4个元素被动态创建）。随着css Myra发布了元素INSIDE div test_1正在定位在彼此之下。但我想看到的是，div test_2位于div test_1之下。因此，无论3个元素（div test_1）的高度如何，第4个元素基本上都必须在3个元素之下。希望我能为您提供更好的信息。

<div style="background-color:yellow;">
    <div class="test1">
        <div class="inner_test1">
           this div gets dynamically generated, so in our example there will be 3 of these inside test1
        </div>
    </div>
    <div class="test2>
        <div class="inner_test2">
            The 4th element gets generated inside this div, if there are 5 elements the 4th and 5th element will be 2 divs of inner_test2
        </div>
        <div class="inner_test2">
            So this is the 5th element for example
        </div>
    </div>
</div>

所以div test2必须定位在div test2下。

Answer 4

我很难理解你的问题。但这是我要检查的三个项目。 1 - 确保所有标签都已正确关闭。如果您缺少标记，则可能会影响布局的呈现方式 2 - 如果物品彼此之间没有落下，请确保没有浮动样式连接到div 3 - 如果您手动设置项目的高度然后添加内容，则您的项目不一定会为新项目腾出空间。

除此之外，如果没有实际看到实际的html呈现，那么诊断将非常困难。

Answer 5

您使用的是jQuery UI手风琴，还是使用“Jquery Accordian”，它或多或少是一系列的秀和隐藏（我会想到这种情况更常用）。

在任何情况下，尝试将“display：block”添加到inner_test2类的CSS中。这应该工作。

根据你的jquery的设置方式（如果你只是使用常规的jquery库来构建accordian），你应该能够在回调中添加一个回调或隐藏，并在之后粘贴块（如果它删除了显示：块）。

Answer 6

我认为您只需要为两个div设置这些属性

#test_1, #test2
{
     width: 100%;
     height: auto;
     display: inline-block; /*oryou can use just inline*/
     margin : 0px;/*this is not necessary but it is better to put it to reset incorrect margin set by browser */
}

Answer 7

我知道很多纯CSS人员都会考虑这个问题很难看，但是如果你在第一个test_1 div之后放了一个标签（如果这是一个选项，因为你提到了一些内容是自动生成的），它可以解决问题。

<div class="test_1"> 
      my first dynamic content div 
   </div><br />

Answer 8

display: inline-block;