jquery - 获取元素的位置

Question

我想将一个元素与另一个元素对齐，例如我想达到这一点:

. Beer    25cl  5€
          50cl  7€
. wine    25cl  2€
          50cl  3€

HTML 代码类似于:

<li>
    <span class="item">Beer</span>
    <span class="size">25cl</span>
    <span class="badge">5€</span>
    <div style="clear:both"></div>
    <span class="size">50cl</span>          <!-- how to tell this to start at the same x position than the previous element of class "size" -->
    <span class="badge">7€</span>
</li>

我已经看到了使用表格的解决方案，但我希望有更好的解决方案(使用表格看起来就像使用火箭筒杀死苍蝇)。

我见过另一种使用 JS 来检索元素的“left”属性的解决方案，但它似乎只有在手动设置 left 元素的情况下才有效，但这里不是这种情况。

如果相关:我正在使用 Bootstrap。

Answer 1

如何使用 Bootstraps 网格布局 - 这也将具有响应性。

我已经在这里为您转换了代码:http://www.bootply.com/L5EzpIO6X8

您可以通过更改 col-lg-12 来调整宽度到不同的尺寸。您可以阅读有关网格布局的更多信息 here .

<ul> 
<li>
  <div class="clearfix">
    <div class="col-lg-6">
      <div class="row">
        <div class="col-lg-6">
          <span class="item">Beer</span>
      </div>
      <div class="col-lg-6">
        <div class="row">
          <div class="col-lg-6">
            <span class="size">25cl</span>
          </div>
          <div class="col-lg-6">
            <span class="badge">5€</span>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <span class="size">50cl</span>
          </div>
          <div class="col-lg-6">
            <span class="badge">7€</span>
          </div>
        </div>
      </div>
      </div>
      <div class="row">
        <div class="col-lg-6">
        <span class="item">Wine</span>
      </div>
      <div class="col-lg-6">
        <div class="row">
          <div class="col-lg-6">
            <span class="size">25cl</span>
          </div>
          <div class="col-lg-6">
            <span class="badge">2€</span>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <span class="size">50cl</span>
          </div>
          <div class="col-lg-6">
            <span class="badge">3€</span>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
  </li>
</ul>

编辑

要回答有关元素符号的问题 - 要从我的示例中的列表中删除“元素符号”，您必须向包含 <ul> 的类添加一个类。 .

Bootstrap 2 它将是:<ul class="unstyled">

Bootstrap 3 它将是:<ul class="list-unstyled">

我已经更新了我的示例(使用 Bootstrap 3)。

编辑2

您可以将 <li> 的内容换行在带有 clearfix 的 div 中类以获得右侧的子弹。

然后，您可以通过调整新 <div> 的边距来调整垂直对齐方式。 。例如:<div class="clearfix" style="margin-top -15px;">