如何在不使用float的情况下将div左右对齐？

当做这样的事情：

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

在这种情况下，如果要右对齐该绿色按钮，只需更改一个div即可使所有内容右对齐：

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

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

进行类似操作的另一种方法是在包装器元素上使用flexbox，即

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

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

   

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

另外，但不是一个好的解决方案，您可以放置​​标签。将包围的div设置为position: relative，然后将按钮的div设置为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;
}

最好使用overflow: hidden;hack，这很脏：

<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;hack :)

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

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

您可以只使用带有百分比的左边距。

的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％。除此以外，它不会像浮游物一样凝聚在一起。（为后面的元素保存默认显示属性）。

今天，非常有用的东西已经应用于我的项目中。一个div必须正确对齐，并且不应用浮动。

应用代码使我的目标得以实现：

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

无需添加额外的元素。尽管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_outer，不是 .outer_align因为它将使意义，因为你垂直扫描。您的代码：

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

随着时间的流逝，良好的习惯会让您早晚上床睡觉。