Question

我有以下格式的div

<div id="main">
   <div id="row1">
      <div id="label1"></div>
      <div id="value1"></div>
   </div>
   <div id="row2">
     <div id="labe2"></div>
     <div id="value2"></div>
   </div>
  <div id="row3">
    <div id="label3"></div>
    <div id="value3"></div>
  </div>
</div>

我正在尝试实现一种布局，其中所有值在右侧彼此对齐，并在每行内向左侧标记。

我尝试过使用float：left和float：就像

一样

CSS

#row1{
  display: inline
}
#value1{
  float:right
}
#row2{
  display: inline
}
#value2{
  float:right
}
#row3{
  display: inline
}
#value3{
  float:right
}

但是，我试过的这个css缺少布局和行项目相互碰撞。有人可以帮助解决问题吗？

Answer 1

如果您熟悉HTML表的工作方式，则可以使用display:table-*属性。顺便说一下，使用class而不是id。将id专门用于DOM操作或表单等内容。除非您别无选择，否则请勿使用id进行样式设置。

段

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>inline</title>
  <style>
    #main {
      border: 5px dotted grey;
      display: table;
      width: 300px;
    }
    .row {
      display: table-row;
    }
    .value {
      border: 1px solid red;
      display: table-cell;
      width: 50%;
    }
    label {
      border: 1px solid blue;
      display: table-cell;
    }
  </style>
</head>

<body>
  <main id="main">
    <div class='row' id="row1">
      <label for='value1'>V1</label>
      <div id="value1" class='value'>44</div>
    </div>
    <div class='row' id="row2">
      <label for='value2'>V2</label>
      <div id="value2" class='value'>ALPHA</div>
    </div>
    <div class='row' id="row3">
      <label for='value3'>V3</label>
      <div id="value3" class='value'></div>
    </div>
  </main>
</body>

</html>

Answer 2

如果我已正确理解您的问题，您希望左侧有标签，右侧的数字位于其标签前面。
以下是http://codepen.io/g1un/pen/PGKEwB的例子添加到您的行类row和标记类label并将下一个css应用于它：

.row::after {
  clear: both;
  display: table;
  content: '';
}

.label {
  float: left;
}

并且不适用于您的行display: inline; - 它只会对您的代码造成损害。

Answer 3

这是我的解决方案 - 相当简单，取代了整个CSS（即没有其他CSS）：

* {
  box-sizing: border-box;
  margin: 0;
}    
div {
  border: 1px dotted #fa5;
}
#main > div > div {
  display: inline-block;
  width: 49.8%;
  padding: 10px;
}

Codepen：http://codepen.io/anon/pen/GjvykB

将宽度值更改为任何所需的设置＆lt; 50％

P.S。：边框不是必需的，仅用于可视化元素，最后填充也没有必要

Answer 4

如果您不需要支持旧的IE浏览器，请使用flexbox

附注：请勿使用id，请使用class

＆＃13;

.main > div {
  display: flex;
}
.main > div > div {
  margin: 0 10px;
}

＆＃13;

<div class="main">
   <div class="row1">
      <div class="label1">1</div>
      <div class="value1">One</div>
   </div>
   <div class="row2">
     <div class="label2">2</div>
     <div class="value2">Two</div>
   </div>
  <div class="row3">
    <div class="label3">3</div>
    <div class="value3">Three</div>
  </div>
</div>

＆＃13;

Answer 5

在我看来 - 尝试显示：inline-block;我希望它可以帮助你。

Answer 6

查看一些documentation，看起来你尝试使用左右对齐的位置。我建议尝试类似文档中的内容：

.right {
    position: absolute;
    right: 0px;
    width: 300px;
}

左右对齐div内的两个div

6 个答案:

段