如何在不使用浮动的情况下左/右对齐 div？

Question

当做这样的事情时：

<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>

我必须使用一个空的 div

clear: both;

这对我来说感觉很脏。

那么，有没有办法在不使用浮动的情况下对齐？

这是我的代码：

 .action_buttons_header a.green_button{ }

 <div class="change_requests_container" style="width:950px !important"> <div class="sidebar"> <a href="/view/preview_unpublished_revision/422?klass=Proposal" class="preview sidebar_button_large action_button" name="preview" onclick="window.open(this.href);return false;">Preview New Version</a> </div> <div class="content_container"> <div class="content"> <div class="action_buttons_header"> <a href="/changes/merge_changes/422" class="re_publish publish green_button" style=" margin: 5px 0px 5px auto; ">Apply Changes</a> </div> <div id="change_list_container"> <div class="changes_table"> <style type="text/css"> #original_492 .rl_inline_added { display: none; } #492.change_container .actial_suggested_text_container{ display: none; } </style> <div class="content_section_header_container"> <div class="content_section_header"> <a href="#" class="collapse" name="492"></a> The Zerg | Overview <div class="status" id="492_status"> <div id="492_status_placeholder"> </div> </div> </div> </div> <div class="change_container" id="492"> </div> </div> </div> </div>

我想要它所在的单杠右侧的绿色按钮，但要以最干净的方式。

只是想学习如何优雅、干净地使用 CSS，等等。

Answer 1

另一种做类似事情的方法是在包装元素上使用 flexbox，即，

 .row { display: flex; justify-content: space-between; }

 <div class="row"> <div>Left</div> <div>Right</div> </div>

Answer 2

在您的情况下，如果您想右对齐那个绿色按钮，只需更改一个 div 以使所有内容右对齐：

<div class="action_buttons_header" style="text-align: right;">

div 已经占据了该部分的全部宽度，因此只需通过右对齐文本将绿色按钮向右移动。

Answer 3

您可以使用display: inline-block类的东西，但我认为您需要设置另一个 div 来移动它，如果按钮左侧没有任何东西，您可以使用边距将其移动到位。

或者，但不是一个好的解决方案，您可以放置​​标签； 将包含的 div 设置为position: relative ，然后将按钮的 div 设置为position: absolute; right: 0 position: absolute; right: 0 ，但就像我说的，这可能不是最好的解决方案

HTML

<div class="parent">
  <div>Left Div</div>
  <div class="right">Right Div</div>
</div>

CSS

.parent {
  position: relative;
}
.right {
    position: absolute;
    right: 0;
}

Answer 4

脏了最好使用overflow: hidden; 黑客：

<div class="container">
  <div style="float: left;">Left Div</div>
  <div style="float: right;">Right Div</div>
</div>

.container { overflow: hidden; }

或者，如果您打算做一些花哨的 CSS3 阴影效果，但在上述解决方案中遇到了麻烦：

http://web.archive.org/web/20120414135722/http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack

聚苯乙烯

如果你想干净，我宁愿担心内联 javascript 而不是overflow: hidden; 黑客:)

Answer 5

另一种解决方案可能类似于以下内容（取决于您元素的显示属性）：

HTML：

<div class="left-align">Left</div>
<div class="right-align">Right</div>

CSS：

.left-align {
  margin-left: 0;
  margin-right: auto;
}
.right-align {
  margin-left: auto;
  margin-right: 0;
}

Answer 6

您可以只使用带有百分比的 margin-left 。

HTML

<div class="goleft">Left Div</div>
<div class="goright">Right Div</div>

CSS

.goright{
    margin-left:20%;
}
.goleft{
    margin-right:20%;
}

（goleft 与默认值相同，但如果需要可以反转）

text-align 并不总是按预期的方式用于布局选项，它主要用于文本。 （但也常用于表单元素）。

这样做的最终结果将与带有 float:right; 的 div 产生类似的效果。 和宽度：80% 设置。 除了，它不会像浮动一样聚集在一起。 （为后面的元素保存默认显示属性）。

Answer 7

今天在我的项目中应用了非常有用的东西。 一个 div 必须正确对齐，没有应用浮动。

应用代码实现了我的目标：

.div {
  margin-right: 0px;
  margin-left: auto;
}

Answer 8

无需添加额外的元素。 虽然 flexbox 使用非常不直观的属性名称，如果你知道它可以做什么，你会发现自己经常使用它。

<div style="display: flex; justify-content: space-between;">
<span>Item Left</span>
<span>Item Right</span>
</div>

计划经常需要这个？

.align_between {display: flex; justify-content: space-between;}

我看到其他人在主要位置使用次要词，这使信息层次结构变得一团糟。 如果align是主要任务，而right 、 left和/或between是次要任务，则该类应该是.align_outer ，而不是.outer_align ，因为在垂直扫描代码时它会有意义：

.align_between {}
.align_left {}
.align_outer {}
.align_right {}

随着时间的推移，良好的习惯会让你早点睡觉。