float를 사용하지 않고 div를 왼쪽 / 오른쪽으로 정렬하는 방법은 무엇입니까?

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>

   

---

you could use things like display: inline-block but I think you would need to set up another div to move it over, if there is nothing going to the left of the button you could use margins to move it into place.

Alternatively but not a good solution, you could position tags; put the encompassing div as position: relative and then the div of the button as position: absolute; right: 0, but like I said this is probably not the best solution

HTML

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

CSS

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

---

It is dirty better use the overflow: hidden; hack:

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

.container { overflow: hidden; }

Or if you are going to do some fancy CSS3 drop-shadow stuff and you get in trouble with the above solution:

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

PS

If you want to go for clean I would rather worry about that inline javascript rather than the overflow: hidden; hack :)

---

Another solution could be something like following (works depending on your element's display property):

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

---

You could just use a margin-left with a percentage.

HTML

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

CSS

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

(goleft would be the same as default, but can reverse if needed)

text-align doesn't always work as intended for layout options, it's mainly just for text. (But is often used for form elements too).

The end result of doing this will have a similar effect to a div with float:right; and width:80% set. Except, it won't clump together like a float will. (Saving the default display properties for the elements that come after).

---

No need to add extra elements. While flexbox uses very non-intuitive property names if you know what it can do you'll find yourself using it quite often.

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

Plan on needing this often?

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

I see other people using secondary words in the primary position which makes a mess of information hierarchy. If align is the primary task and right, left, and/or between are the secondary the class should be .align_outer, not .outer_align as it will make sense as you vertically scan your code:

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

Good habits over time will allow you to get to bed sooner than later.

---

Very useful thing have applied today in my project. One div had to be aligned right, with no floating applied.

Applying code made my goal achieved:

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

참고URL : https://stackoverflow.com/questions/8794778/how-do-you-align-left-right-a-div-without-using-float