CSS를 사용하여 디브 3개를 나란히 띄우는 방법?

CSS를 사용하여 디브 3개를 나란히 띄우는 방법?

나는 디브 2개를 나란히 띄우는 방법을 알고 있습니다. 하나는 왼쪽으로, 다른 하나는 오른쪽으로 띄우기만 하면 됩니다.

그런데 디브 3개로 어떻게 해야 하나요, 아니면 그냥 테이블을 사용해야 하나요?

과 만 됩니다.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 플렉스박스를 사용하는 것입니다. 지원 표를 참조하십시오.

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

두 디브와 마찬가지로 세 번째 디브도 왼쪽이나 오른쪽으로 띄우기만 하면 됩니다.

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

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

모두 왼쪽으로 띄우다

컨테이너(다른 디브 또는 윈도우)에 모두 들어갈 수 있는 폭이 지정되었는지 확인합니다. 그렇지 않으면 랩이 됩니다.

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

누군가 저 위에 올렸던 그 코드, 그것은 성공했습니다!!!Container 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>

tada!! :)

디브 세 개를 모두 왼쪽으로 띄웁니다.여기와 같습니다.

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

<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% 분할 공간으로 분할됩니다.

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

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

띄울 수 있습니다: 모든 것을 왼쪽으로 하고 폭을 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에서는 Float가 제대로 지원되지 않습니다(정말요?...).

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

업데이트: 물론 이 기법을 사용하려면 절대 위치 때문에 용기에 디브를 감싸고 후처리를 수행하여 if의 높이를 정의해야 합니다.

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

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

하지만 크롬에서는 작동이 되나요?

각 디브를 띄우고 행에 대해 모두 설정합니다.원하지 않으면 폭을 설정할 필요가 없습니다.Chrome 41, Firefox 37, IE 11에서 작동합니다.

JS Fiddle 클릭

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 이 방법도 좋지만 모든 부동 디브에 너비를 추가해야 합니다.저는 그들을 같은 폭으로 만들거나 고정된 폭을 할당하고 싶습니다.뭐 이런 거.

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

각 디브에 클래스 이름을 추가하는 대신 할당할 수 있습니다.inline style, 좋은 관행이 아닌 거죠

이 디브 아래에 콘텐츠가 남아 있지 않도록 명확한 수정 디브 또는 명확한 디브를 사용해야 합니다.

clearfix div 사용 방법에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

display: table;
텍스트가 표시되어야 하는 경우
같은 선상에 있는 것처럼

즉, 각 텍스트의 세로 정렬인 경우<div>동일할 필요가 있습니다. 사람은 다소 논란이 있는 과거로의 현대적인 복고적인 과거로의 회귀를 시도를 할 수 있습니다.table스타일링:

.container {display: table;}
div   {display: table-cell;}

이는 아래와 같이 판독에서 CSL 스타일 인용을 포맷하는 데 상당히 유용한 것으로 입증되었습니다.

div.csl-bib-body {}
div.csl-entry {
    margin-top: 1rem;
    display: table;
    }
div.csl-left-margin {
    display: table-cell;
    }
div.csl-right-inline {
    padding-left: 1ex;
    display: table-cell;
    }

인용번호div그리고 인용 자료.div지금은 정확히 같은 높이로 표시됩니다.

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