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>

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

<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;" />

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

이 방법을 선호합니다. 이전 버전의 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에서는 깨지지 않습니다.

그러나 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 사용 방법에 대한 자세한 내용은 여기를 참조하십시오.