같은 행에 3 개의 div를 어떻게 정렬합니까?

같은 행에 3 개의 div를 어떻게 정렬합니까?

---

내가 오랫동안 그것을 다루어 왔기 때문에 누군가이 문제로 나를 도울 수 있습니까? ...

같은 줄에 3 개의 div를 나란히 놓으려고합니다. div 중 하나는 다음과 같습니다.

<div>  
  <h2 align="center">San Andreas: Multiplayer</h2>  
  <div align="center">
    <font size="+1">  
      <em class="heading_description">15 pence per slot</em>  
    </font>  
    <img src="http://fhers.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; ">  
    <a href="gfh" class="order-small">  
      <span>order</span></a>  
  </div>

다른 두 div는 같은 div입니다. 같은 줄에 세 div를 모두 가져 오도록 도와주세요. 하나는 오른쪽에, 하나는 중간에, 하나는 왼쪽에

---

아무도 CSS 테이블 레이아웃을 솔루션으로 제공하지 않았다는 사실에 놀랐습니다.

실무 데모 확인

순수 CSS 2.1, 크로스 브라우저 (IE8 +)

HTML :

<div class="Row">
    <div class="Column">C1</div>
    <div class="Column">C2</div>
    <div class="Column">C3</div>
</div>

CSS :

.Row
{
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
}
.Column
{
    display: table-cell;
    background-color: red; /*Optional*/
}

---

내 코드보기

<div>
    <h2 align="center">San Andreas: Multiplayer</h2>
    <div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>
    <div align="center" class="float-left">CONTENT OF COLUMN TWO GOES HERE</div>
    <div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>
</div>

그리고 CSS 파일 내부 :

.float-left {
float:left;
width:300px; // or 33% for equal width independent of parent width
}

---

나는이 게시물에서 어떻게 끝났는지 잘 모르겠지만 대부분의 답변은 수레, 절대 위치 및 기타 옵션을 사용하고 있기 때문에 현재 최적이 아닌 다른 옵션을 사용하기 때문에 더 많은 새로운 답변을 줄 것이라고 생각했습니다. 그것의 표준에 대한 날짜 (float는 더 이상 정결하지 않습니다).

.parent {
  display: flex;
  flex-direction:row;
}

.column {
  flex: 1 1 0px;
  border: 1px solid black;
}

<div class="parent">
    <div class="column">Column 1</div>
    <div class="column">Column 2<br>Column 2<br>Column 2<br>Column 2<br></div>
    <div class="column">Column 3</div>
</div>

---

다음은 두 가지 샘플입니다. http://jsfiddle.net/H5q5h/1/

하나는 사용 float:left하고 overflow:hidden. 래퍼는 래퍼의 형제가 래퍼 아래에서 시작되도록합니다.

두 번째는 더 최근의 것을 사용 display:inline-block하고 래퍼는 무시할 수 있습니다. 그러나 이것은 일반적으로 이전 브라우저에서 지원되지 않으므로 가볍게 넘어가십시오. 또한 항목 사이에 공백이 있으면 항목 div의 왼쪽과 오른쪽에 불필요한 "여백과 같은"공백이 발생합니다.

---

오래된 주제이지만 누군가가 좋아할 것입니다.

바이올린 링크 http://jsfiddle.net/74ShU/

<div class="mainDIV">
    <div class="leftDIV"></div>
    <div class="middleDIV"></div>
    <div class="rightDIV"></div>
</div>

및 CSS

.mainDIV{
    position:relative;
    background:yellow;
    width:100%;
    min-width:315px;
}
.leftDIV{
    position:absolute;
    top:0px;
    left:0px;
    height:50px;
    width:100px;
    background:red;
}
.middleDIV{
    height:50px;
    width:100px;
    background:blue;
    margin:0px auto;
}
.rightDIV{
    position:absolute;
    top:0px;
    right:0px;
    height:50px;
    width:100px;
    background:green;
}

---

2019 답변 :

CSS 그리드 사용 :

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

---

마지막 행이 아닌 다른 행에 표시하려는 모든 div에 float left 속성을 추가하기 만하면됩니다. 여기에 예가 있습니다

<div>
  <div style="float: left;">A</div>
  <div style="float: left;">B</div>
  <div>C</div>
</div>

---

이것은 더 쉽고 순서가 지정되지 않은 목록 태그를 사용하지 않는 목적을 제공합니다.

CSS에 다음을 추가하십시오.

    li{float: left;}  //Sets float left property globally for all li tags.

그런 다음 HTML을 추가하십시오.

    <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>        
    </ul>

이제 모든 것이 완벽하게 정렬되는 것을보십시오! 더 이상 테이블 대 div에 대해 논쟁하지 마십시오!

---

기본적으로 다음과 같이 HTML을 사용할 수있게 해주는 기본 래피드 프로토 타이핑 프레임 워크를 확인하십시오.

<div class="row">
    <div class="four columns">
    </div>
    <div class="four columns">
    </div>
    <div class="four columns">
    </div>
</div>

이것은 내가 본 것 중 가장 간단한 HTML / CSS 그리드 시스템으로, 12 개의 열 그리드를 기반으로합니다.

기본적으로 열에는 부모 행을 기준으로 % 너비와 왼쪽 여백이 제공됩니다. 열에는 부동이 왼쪽으로 설정되고 위치가 상대로 설정되고 표시가 차단으로 설정됩니다.

행에는 일반적으로 포함 div를 높이 0으로 축소하여 다음 div가 '푸시'되는 것을 방지하는 문제의 핵심을 처리하는 몇 가지 속성이 설정되어 있습니다.

You can find examples of using the foundation grid system here: http://foundation.zurb.com/docs/grid.php

If you don't want to use the entire framework the following CSS should do the trick with the example code I provided:

.row:after {
    content: "";
    clear: both;
    display: table;
}

.four.column {
    float: left;
    width: 33%;
}

If you really specifically want a left center and right columns then use code like this:

CSS:

.row:after {
    content: "";
    clear: both;
    display: table;
}

.left {
    float: left;
    width: 100px;
}

.center {
    margin: 0 auto;
    width: 100px;
}

.right {
    float: right;
    width: 100px;
}

HTML:

<div class="row">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

---

Why don't try to use bootstrap's solutions. They are perfect if you don't want to meddle with tables and floats.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <!--- This line is just linking the bootstrap thingie in the file. The real thing starts below -->

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
  </div>
</div>

No meddling with complex CSS, and the best thing is that you can edit the width of the columns by changing the number. You can find more examples at https://getbootstrap.com/docs/4.0/layout/grid/

---

Put the divisions in 'td' tag. That's it done.

---

Another possible solution:

<div>
  <h2 align="center">
  San Andreas: Multiplayer
</h2>
    <div align="center">
<font size="+1"><em class="heading_description">15 pence per
slot</em></font> <img src=
"http://fhers.com/images/game_servers/sa-mp.jpg" class=
"alignleft noTopMargin" style="width: 188px;" /> <a href="gfh"
class="order-small"><span>order</span></a>
    </div>
 </div>

Also helpful as well.

ReferenceURL : https://stackoverflow.com/questions/8690841/how-do-i-line-up-3-divs-on-the-same-row