Как вы выравниваете левый/правый div без использования float?

Когда делаете что-то вроде этого:

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

Я должен использовать пустой div с

clear: both;

который кажется мне очень грязным.

Так есть ли способ выравнивания без использования float?

Вот мой код:

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

Ответ 1

В данном случае здесь, если вы хотите выровнять по правому краю зеленую кнопку, просто измените один div на все выровненные по правому краю:

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

Div уже занимает всю ширину этого раздела, поэтому просто сдвиньте зеленую кнопку справа, выравнивая текст по правому краю.

Ответ 2

Другой способ сделать что-то похожее - использовать flexbox на элементе-обертке, то есть

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

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

Ответ 3

вы можете использовать такие вещи, как display: inline-block, но я думаю, вам нужно будет настроить другой div, чтобы переместить его, если ничего не осталось слева от кнопки, вы можете использовать поля, чтобы переместить их на место.

Альтернативно, но не очень хорошее решение, вы можете позиционировать теги; поставьте 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;
}

Ответ 4

Более грязно использовать 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:)

Ответ 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;
}

Ответ 6

Вы можете просто использовать маржу слева и процент.

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 не всегда работает так, как предполагалось для параметров макета, в основном для текста. (Но часто используется и для элементов формы).

Конечный результат этого будет иметь схожий эффект с div с float: right; и ширина: 80%. Кроме того, он не будет сжиматься, как поплавок. (Сохранение свойств отображения по умолчанию для следующих элементов).

Ответ 7

Нет необходимости добавлять дополнительные элементы. Хотя 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 {}

Хорошие привычки со временем позволят вам лечь спать раньше, чем позже.

Ответ 8

Очень полезную вещь применили сегодня в моем проекте. Один div должен быть выровнен по правому краю, без применения плавающего.

Применение кода сделало мою цель достигнутой:

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