定位 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就会打开，里面有两个单独的div。这一切都有效，但是我的手风琴div中的两个div的定位失败了。我想让它们彼此下方，但是两个div都是动态生成的，这意味着我不知道第一个div（test_1）的大小，因此无法按像素定位。我已经尝试过一些br标签等，但似乎没有什么作用。是否有一种方法可以在css中使用float或其他东西来实现，或者应该在html内部完成？还有其他的想法吗？

问候，

T

- Thomas

---

除非您使用CSS修改其行为，否则div应该垂直流动。您能发布.accordian及其内容的CSS吗？ - Siddhartha Reddy

如果您编辑问题并添加CSS定义，将会有所帮助，因为像您所做的那样在彼此下面添加div将默认显示在彼此下面，除非在CSS中指定其他内容（这意味着您的问题在样式定义中而不是在HTML中）。 - awe

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类添加到测试中。

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

最好的祝福
Myra

- Myra

---

问题在于我的test_1和test_2没有显示在彼此下面...所以你确定这是解决方案吗？ - Thomas

好的，我做了那个，它将test_1 div内的所有元素放置在彼此下面，而不是分开放在2个div下面。这有点棘手，所以我会解释得更详细一些：在div test_1内有动态内容，因此会生成3个单独的div（如果内容包含3个，如果4则有4个div），这些div应该再次相邻放置（这没有问题），但当我有4个div时，第一个div的内容可能会被切割，因此在div test_1中，我有3个div在test_1内，第4个元素进入div test_2。问题是将div test_2定位在div test_1下面。 - Thomas

如果您认为已经找到了问题的答案，那么您应该接受一个答案，也就是像我们所做的那样回答您的问题并接受它。 - Myra

请检查我的答案，因为我还没有找到问题，你的解决方案只是让我的内部div相互叠放，这不是我想要的。我稍微解释一下。 - Thomas

就像我之前所说的，当在test_1上设置宽度时，这会将其内部的元素分成多行，但必须将test_2分割在test_1下面... - Thomas

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>

- superUntitled

Answer 3

我用更多的代码来解释一下:

让我们举个例子，我动态创建了4个元素。我已经在之前发布的“手风琴”div里有2个div，即test_1和test_2。每个div中可以创建3个元素。所以在第一个div test_1中会有3个div（因为有3个元素），在div test_2中会有1个div（第4个动态创建的元素）。使用Myra发布的CSS，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 test1 下方。

- Thomas

---

关于stackoverflow礼仪的提醒：您应该编辑您的原始问题并将此内容放入其中，而不是将其作为答案添加。 - pinkgothic

Answer 4

我认为你只需要为这两个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 */
}

- Nasser Hadjloo

Answer 5

我知道对于许多纯CSS的人来说，这可能看起来很丑陋，但如果您在第一个test_1 div后面放置一个
标签（如果这是一个选项，因为您提到一些内容是自动生成的），它可能会解决问题。

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

- Jonathan Hickman

Answer 6

display: inline-block;

- travismillward

Answer 7

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

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

- Joseph Connolly

---

问题在于inner_test2内部的高度是动态确定的，这意味着它可以是50像素，但也可能是150像素，具体取决于其中有多少项。当设置固定高度时，没有问题可以将它们放在彼此下面...但每次高度基于出现的内容确定时，divs inner_test2不会显示我想要的样子。基本上，当我有4个inner_test2项时，我希望3个inner_test2项靠在一起，第4个inner_test2项则在第1个inner_test2元素的正下方。 - Thomas

Answer 8

你是使用jQuery UI手风琴，还是使用更多或更少的一系列显示和隐藏的“Jquery Accordian”（我认为后者更常用）。

无论如何，尝试将"display:block"添加到inner_test2类的CSS中。那应该可以解决问题。

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

- MindingData