Question

我得到了以下内容：

<div class="elf">Label 1</div>
<div class="eff">Data 1</div>

<div class="elf">Label 2</div>
<div class="eff">Data 2</div>

<div class="elf">Label 3</div>
<div class="eff">Data 3</div>

我需要做的是让标签和数据排列如下。标签位于顶部，数据直接位于下方，标签和数据向左流动，并在填充对话框宽度后继续向左流动：

Label 1      Label 2        Label 3
Data 1       Data 2         Data 3

...

Label 9      Label 10        Label 11
Data 9       Data 10         Data 11

我尝试了很多不同的CSS组合但是不能得到这样的东西。这是我最新的CSS不起作用：

.elf { margin: 1em 0 0 0; float: left; }
.eff { margin: 0.5em 0 0 0; display: block;  }

有人可以给我一些建议吗？ Link to fiddle example

请注意我无法在HTML中添加任何内容。我所能做的就是更改此应用程序的CSS。

谢谢

Answer 1

好像你有数据可以将它自己正确地放到桌子上，这可能是你最好的选择。但是否则只需在标签和数据周围做一个包装。

<style>
  .box {
    float:left;
    overflow:auto;
  }
  .label, .data {
    display:block;
  }
</style>

<div class="box">
  <div class="label">
    Label 1
  </div>
  <div class="data">
    Data 1
  </div>
</div>

Answer 2

对于不改变源HTML的纯CSS解决方案，您可以尝试

.elf{
  float:left;
  width:100px;
  margin-bottom:2em;
}

.eff{
  position:relative;
  left:-100px;
  top:1em;
  width:1px;
  overflow:visible;
  white-space:nowrap;
  float:left;
}

Answer 3

假设您无论如何都无法更改html（如果可以，您真的应该这样做），并且只能编辑css，您可以使用以下内容（假设标签具有FIXED宽度）：

.elf { margin: 0 0 0 0; display: inline-block;}
.eff { margin-left: -3em; display: inline-block; position: relative; direction: ltr; top: 1em;}

如果您可以更改html，这将使它更容易：

<div style="float:left">
    <div class="elf">Label 1</div>
    <div class="eff">Data 1</div>
</div>

如何用CSS排列我的DIV？

3 个答案: