CSS를 사용하여 3 div를 나란히 플로팅하는 방법은 무엇입니까? 2 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>