定位 div答案 - 爱码网

【问题标题】：Positioning divs定位 div
【发布时间】：2010-05-20 04:01:05
【问题描述】：

我正在使用 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 中完成？还有其他想法吗？

问候，

T

【问题讨论】：

div 应该垂直流动，除非您有 CSS 修改该行为。你能发布 .accordian 的 CSS 及其内容吗？
如果你编辑你的问题并添加你的css定义会有所帮助，因为像你一样在彼此下方添加div将默认显示在彼此下方，除非在css中指定了其他（这意味着你的问题是在样式定义中，而不是在 html 中）。

标签： jquery css jquery-ui html

【解决方案1】：

我认为你可以通过 css 处理它

第一种方法在 accordion 类下的 any 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"> ...

最好的问候
迈拉

【讨论】：

问题是我的 test_1 和我的 test_2 没有显示在彼此之下...所以你确定这可能是解决方案吗？
Oki 我做了那个，并将我的所有元素放置在 test_1 div 中，而不是 2 个 div 在彼此下方，这有点棘手，所以我解释更多：在 div test_1 里面有动态内容，因此生成了 3 个单独的 div（如果内容包含 3，如果 4，则有 4 个 div）应该彼此相邻（这可行，不是问题）但是当我得到 4 个 div 时，内容第一个 div 可以在 div test_1 中剪切，我在 test_1 中有 3 个 div，第 4 个元素在 div test_2 中。问题是将 div test_2 定位在 div test_1 下。
如果你认为你已经找到了问题，那么你应该接受一个答案，这意味着像我们一样回答你的问题并接受它。
请检查我的答案，因为我还没有发现问题，你的解决方案只是让我的内部 div 定位在彼此之下，这不是我想要的。我解释了一点
就像我之前说的那样，在 test_1 上设置宽度时，这会将我的元素在其中拆分，但它必须在 test_1 下拆分 test_2...

【解决方案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>

【讨论】：

【解决方案3】：

我用更多的代码解释得更好：

让我们举个例子，我动态创建了 4 个元素。我在之前发布的“手风琴”div 中有 2 个 div，即 test_1 和 test_2。每个 div 可以有 3 个动态创建的元素。所以在第一个 div test_1 中会有 3 个 div（因为有 3 个元素），而在 div test_2 中会有 1 个 div（第 4 个动态创建的元素）。随着 css Myra 的发布，div test_1 内部的元素被定位在彼此下方。但我想看到的是，div test_2 位于 div test_1 下。所以第 4 个元素基本上必须在 3 个元素之下，无论 3 个元素（div test_1）的高度是多少。希望我为您提供了更好的信息。

<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 之下。

【讨论】：

只是一个关于 stackoverflow 礼仪的仅供参考：您应该编辑您的原始问题并将其放入，而不是将其添加为答案。

【解决方案4】：

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

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

【讨论】：

问题或多或少是inner_test2内部的高度是动态确定的，这意味着它可以是50px，但也可以是150px，具体取决于里面有多少项目。设置固定高度时，将它们放在彼此下方是没有问题的……但是每次根据出现的内容确定高度时，div inner_test2 不会显示我想要的方式。基本上，当我有 4 个 inner_test2 项目时，我想要 3 个相互靠近的 inner_test2 项目和第 4 个 inner_test2 我想要在第一个 inner_test2 元素下方

【解决方案5】：

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

无论如何，请尝试将“display:block”添加到 inner_test2 类的 CSS。那应该行得通。

根据您的 jquery 的设置方式（如果您仅使用常规 jquery 库构建手风琴），您应该能够添加对 show 或 hide 的回调，并在之后粘贴块（即是如果它删除了显示：块）。

【讨论】：

【解决方案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 */
}

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

display: inline-block;

【讨论】：