如何在不使用浮点的情况下左/右对齐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>

我想要它所在的水平条右侧的绿色按钮,但是以最干净的方式.

只是想学习如何优雅,干净,等等.

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,但就像我说这可能不是最好的解决方案

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

PS

如果你想要干净我宁愿担心内联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;
}