将 div 内的两个 div 左右对齐答案

【问题标题】：Align two divs inside a div left and right将 div 内的两个 div 左右对齐
【发布时间】：2016-09-29 20:40:27
【问题描述】：

我有一个以下格式的 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:right 之类的

css

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

但是，我尝试的这个 css 缺少布局，并且行项目相互碰撞。有人可以帮忙解决可能是什么问题吗？

【问题讨论】：

不确定我是否理解你的正确..这里是CODEPEN，看看那个..
这听起来像是您正在尝试显示表格数据，为什么不改用<table>
如果发布的任何答案解决了您的问题，请接受，如果没有，请告诉我们，我们可以为您找到可以解决的问题

标签： html css

【解决方案1】：

如果您熟悉 HTML 表格的工作原理，则可以使用 display:table-* 属性。顺便说一句，使用类而不是 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>

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，您希望在左侧有标签，在其标签前面有右侧的值。
这是给你的例子http://codepen.io/g1un/pen/PGKEwB
添加到您的行类 row 和标签类 label 并对其应用下一个 css：

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

.label {
  float: left;
}

并且不要应用于您的行 display: inline; - 它只会损害您的代码。

【讨论】：

我认为你在 /left/right 上的标签/值的措辞是错误的，你基本上说的与你笔中的相反
@Huangism 你是完全正确的。谢谢！已纠正此错误。

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

将宽度值更改为任何所需的设置

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

【讨论】：

【解决方案4】：

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

旁注：不要那样使用id，使用class

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

<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>

【讨论】：

【解决方案5】：

在我看来 - 试试 display: inline-block;希望对你有帮助。

【讨论】：

【解决方案6】：

查看一些documentation，您似乎正在尝试使用位置进行左右对齐。我建议在文档中尝试类似的内容：

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

【讨论】：