CSS를 사용하여 3 div를 나란히 플로팅하는 방법은 무엇입니까?

CSS를 사용하여 3 div를 나란히 플로팅하는 방법은 무엇입니까?

---

2 div를 나란히 띄우는 방법을 알고 있습니다. 하나는 왼쪽으로, 다른 하나는 오른쪽으로 플로팅합니다.

그러나 3 div 로이 작업을 수행하는 방법 또는이 목적으로 테이블을 사용해야합니까?

---

너비를 지정하고 float: left;예를 들어 보겠습니다.

<div style="width: 500px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
</div>

---

현대적인 방법은 CSS flexbox 를 사용하는 것 입니다. 지원 테이블을 참조하십시오 .

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

CSS 표를 사용할 수도 있습니다 ( 지원 표 참조) .

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

---

두 div의 경우와 같은 방법으로 세 번째 div도 왼쪽 또는 오른쪽으로 플로팅하십시오.

<style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

---

그들을 모두 떠내려 라

너비가 컨테이너 (다른 div 또는 창)에 모두 들어갈 수 있도록 지정해야합니다. 그렇지 않으면 줄 바꿈됩니다.

---

<br style="clear: left;" />

누군가가 거기에 게시 한 코드는 트릭을했습니다 !!! 컨테이너 DIV를 닫기 직전에 붙여 넣을 때 모든 후속 DIV가 상단에서 나란히 만든 DIV와 겹치지 않도록 도와줍니다!

<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!--  then magic trick comes here  -->
<br style="clear: left;" />
</div>

타다 아 !! :)

---

3 개의 div를 모두 왼쪽으로 띄우십시오. 여기처럼 :

.first-div {
  width:370px;
  height:150px;
  float:left;
  background-color:pink;
}

.second-div {
  width:370px;
  height:150px;
  float:left;
  background-color:blue;
}

.third-div {
  width:370px;
  height:150px;
  float:left;
  background-color:purple;
}

---

나는 보통 첫 번째를 왼쪽으로, 두 번째를 오른쪽으로 띄웁니다. 세 번째는 자동으로 그들 사이에 정렬됩니다.

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>

---

<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>

<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>

이 방법의 장점은 100 % 미만으로 유지하는 한 각 열 너비를 서로 독립적으로 설정할 수 있다는 것입니다. 3 x 30 %를 사용하는 경우 나머지 10 %는 열 사이의 5 % 분배기 공간으로 분할됩니다.

---

플로팅 할 수 있습니다. 모든 항목을 그대로두고 너비를 33.333 %로 설정하십시오.

---

스타일에 "display : block"을 추가하십시오

<style>
   .left{
          display: block;
          float:left; 
          width:33%;
    }
</style>


<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

---

이 방법을 선호합니다. 이전 버전의 IE에서는 플로트가 제대로 지원되지 않습니다 (정말? ...)

.column-left{ position:absolute; left: 0px; width: 33.3%; background: red; }
.column-right{position:absolute; left:66.6%; width: 33.3%; background: green; }
.column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }

업데이트 : 물론이 기술을 사용하고 절대 위치로 인해 컨테이너에 div를 묶고 사후 처리를 수행하여 if의 높이를 정의해야합니다.

jQuery(document).ready(function(){ 
    jQuery('.main').height( Math.max (
        jQuery('.column-left').height(),
        jQuery('.column‌​-right').height(),
        jQuery('.column-center').height())
    ); 
});

세계에서 가장 놀라운 것은 아니지만 적어도 오래된 IE에서는 깨지지 않습니다.

---

부트 스트랩 답변을 보지 못했기 때문에 그만한 가치가 있습니다.

<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />

부트 스트랩이 백분율을 알아 내도록하십시오. 만약을 대비하여 둘 다 지우고 싶습니다.

---

그러나 Chrome에서 작동합니까?

각 div를 플로팅하고 행에 대해 clear; 둘 다 설정하십시오. 원하지 않는 경우 너비를 설정할 필요가 없습니다. Chrome 41, Firefox 37, IE 11에서 작동

JS 피들 클릭

HTML

<div class="stack">
    <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
    </div>
        <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
                    <div class="col">
            Three
        </div>
    </div>
</div>

CSS

.stack .row { 
clear:both;

}
.stack .row  .col    {
    float:left;
      border:1px solid;

}

---

다음은 <footer>요소 내부에서 이와 비슷한 작업을 수행하는 방법입니다 .

<div class="content-wrapper">

    <div style="float:left">
        <p>&copy; 2012 - @DateTime.Now.Year @Localization.ClientName</p>
    </div>

    <div style="float:right">
        <p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p>
    </div>

    <div style="text-align:center;">
        <p>☎ (24) 3347-3110 | (24) 8119-1085&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
    </div>

</div>

CSS :

.content-wrapper
{
    margin: 0 auto;
    max-width: 1216px;
}

---

@Leniel이 방법은 좋지만 모든 부동 div에 너비를 추가해야합니다. 나는 그것들을 같은 너비로 만들거나 고정 너비를 할당한다고 말합니다. 같은 것

.content-wrapper > div { width:33.3%; }

을 추가하는 대신 각 div에 클래스 이름을 할당 할 수 있습니다 inline style. 이는 좋은 방법이 아닙니다.

다음 내용이이 div 아래에 남아 있지 않도록 clearfix div 또는 clear div를 사용해야합니다.

clearfix div 사용 방법에 대한 자세한 내용은 여기를 참조하십시오.

참고 URL : https://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css