Làm cách nào để căn chỉnh 3 div (trái / giữa / phải) bên trong div khác?

392

Tôi muốn có 3 div được căn trong một div container, đại loại như thế này:

[[LEFT]       [CENTER]        [RIGHT]]

Container div rộng 100% (không có chiều rộng được đặt) và div div sẽ vẫn ở giữa sau khi thay đổi kích thước container.

Vì vậy, tôi đặt:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

Nhưng nó trở thành:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Bất cứ lời khuyên?

html  css  flexbox  alignment  css-float 
— nông nô
nguồn
1
Nếu vùng chứa trở nên hẹp hơn 300px, điều đó sẽ xảy ra trừ khi bạn đặt thuộc tính tràn.
— inkedmn
Flexbox và cả Lưới: jsfiddle.net/w0s4xmc0/12963
— Manoj Kumar
Chỉ cần lưu ý - Theo nhận xét của @ inkedmn, với một loạt nội dung trong mỗi cột, tôi không thể có được tất cả chúng để căn chỉnh chính xác ở bất kỳ chiều rộng vùng chứa nào mà không có overflow: hidden;trên centercột. Sau đó, trong truy vấn phương tiện cho các thiết bị nhỏ khi tôi có tất cả 3 cột ở giữa trang này, tôi cần overflow: hidden;ở hàng giữa (đó là cột bên phải trên các thiết bị lớn) nếu không nó không có chiều cao và không được căn giữa theo chiều dọc giữa hàng trên cùng và dưới cùng.
— Chris L

Câu trả lời:

364

Với CSS đó, hãy đặt div của bạn như vậy (nổi trước):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

PS Bạn cũng có thể nổi bên phải, sau đó sang trái, sau đó vào giữa. Điều quan trọng là những chiếc phao đến trước phần trung tâm "chính".

PPS Bạn thường muốn cuối cùng bên trong #containerđoạn trích này: <div style="clear:both;"></div>nó sẽ mở rộng #containertheo chiều dọc để chứa cả hai mặt nổi thay vì chỉ lấy chiều cao của nó từ #centervà có thể cho phép các bên nhô ra phía dưới.

— vitamin
nguồn
Làm thế nào bạn sẽ làm điều đó nếu container không 100%? Tôi đang thử một cái gì đó như thế ở đây, tôi muốn div ở bên phải của container, nhưng nó trôi nổi ở bên phải của trang
— Tiago
@Tiago: Những chiếc phao nên vẫn bị ràng buộc với div nếu chúng ở bên trong nó. Kiểm tra chiều rộng của container bằng cách đặt nó vào border:solid. Nếu đó là 100% thì hãy đặt nó vào một div khác để đặt nó vào trong trang của bạn.
— James P.
Ngoài ra - Nếu bạn đang đặt những thứ này vào trong một thùng chứa có thể thay đổi kích thước, hãy đảm bảo đặt chiều rộng tối thiểu của thùng chứa để giữ cho div nổi bên phải không bị đẩy xuống.
— Tapefreak
6
Câu trả lời này là hơn sáu tuổi. Năm 2016, câu trả lời đúng là flexbox.
1
@torazaburo, có thể có nhiều hơn một câu trả lời đúng, có nhiều cách để đạt được cùng một điểm, trong trường hợp này, tôi phải sử dụng giải pháp này vì một khung mà tôi sử dụng, đã đặt trái và phải với các phần tử, chỉ thêm yếu tố trung tâm ở cuối là hoàn hảo cho tôi.
— Mã hóa Ninja
128

Nếu bạn không muốn thay đổi cấu trúc HTML của mình, bạn cũng có thể thực hiện bằng cách thêm text-align: center;vào phần tử trình bao bọc và display: inline-block;phần tử trung tâm.

#container {
    width:100%;
    text-align:center;
}

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

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

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

Bản trình diễn trực tiếp: http://jsfiddle.net/CH9K8/

— fruechtemuesli
nguồn
1
Đây là giải pháp duy nhất thay đổi kích thước phù hợp với chiều rộng cửa sổ mà không cần gấp quá sớm.
— Jared Sealey
2
Thật hoàn hảo khi kích thước Trái và Phải bằng nhau. Nếu không, Trung tâm không phải là trung tâm.
— mortalis
127

Căn chỉnh ba Div theo chiều ngang bằng cách sử dụng Flexbox

Đây là một phương pháp CSS3 để sắp xếp các div theo chiều ngang bên trong một div khác.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
Mở rộng đoạn trích

jsFiddle

Tài justify-contentsản có năm giá trị:

  • flex-start (mặc định)
  • flex-end
  • center
  • space-between
  • space-around

Trong mọi trường hợp, ba div nằm trên cùng một dòng. Để biết mô tả của từng giá trị, hãy xem: https://stackoverflow.com/a/33856609/3597276

Lợi ích của flexbox:

  1. mã tối thiểu; rất hiệu quả
  2. định tâm, cả theo chiều dọc và chiều ngang, rất đơn giản và dễ dàng
  3. cột chiều cao bằng nhau là đơn giản và dễ dàng
  4. nhiều tùy chọn để căn chỉnh các yếu tố flex
  5. nó phản ứng nhanh
  6. Không giống như phao và bảng, có khả năng bố trí hạn chế vì chúng không bao giờ được dùng để xây dựng bố cục, flexbox là một kỹ thuật hiện đại (CSS3) với một loạt các tùy chọn.

Để tìm hiểu thêm về flexbox hãy truy cập:

Hỗ trợ trình duyệt: Flexbox được hỗ trợ bởi tất cả các trình duyệt chính, ngoại trừ IE <10 . Một số phiên bản trình duyệt gần đây, như Safari 8 và IE10, yêu cầu tiền tố của nhà cung cấp . Để biết cách nhanh chóng để thêm tiền tố, hãy sử dụng Autoprefixer . Thêm chi tiết trong câu trả lời này .

— Michael Benjamin
nguồn
7
Flex tốt hơn nhiều so với sử dụng phao.
— Faizan Akram Dar
1
Giải thích tuyệt vời ở đây và trong các bài viết được liên kết! Một sidenote: Sử dụng các phần tử "span" làm các mục flex bên trong div container hoạt động trong firefox nhưng không hoạt động trong trình duyệt dựa trên javafx (webview). Thay đổi "nhịp" thành "div" hoạt động ở cả hai.
— Ashok
Internet Explorer 10 và các phiên bản trước đó không hỗ trợ thuộc tính nội dung biện minh
— D.Snap 30/03/2017
1
Thật không may, điều này chỉ hoạt động với các mục có cùng chiều rộng. Đồng thời xem stackoverflow.com/questions/32551291/
— xử lý
Tuyệt vời, tôi đã thử tất cả các giải pháp ở đây và đây là giải pháp tốt nhất!
— Nico Müller
22

Float thuộc tính thực sự không được sử dụng để căn chỉnh văn bản.

Thuộc tính này được sử dụng để thêm phần tử vào bên phải hoặc bên trái hoặc giữa. 

div > div { border: 1px solid black;}
<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>
Mở rộng đoạn trích

cho float:leftđầu ra sẽ là[First][second][Third]

cho float:rightđầu ra sẽ là[Third][Second][First]

Điều đó có nghĩa là float => thuộc tính bên trái sẽ thêm phần tử tiếp theo của bạn vào bên trái của phần trước, Trường hợp tương tự với bên phải

Ngoài ra, bạn phải xem xét chiều rộng của phần tử cha, nếu tổng chiều rộng của phần tử con vượt quá chiều rộng của phần tử cha thì phần tử tiếp theo sẽ được thêm vào dòng tiếp theo

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>
Mở rộng đoạn trích

[Đầu tiên] [Thứ hai]

[Ngày thứ ba]

Vì vậy, bạn cần xem xét tất cả các khía cạnh này để có được kết quả hoàn hảo

— Rajiv Pingale
nguồn
13

Tôi thích thanh của tôi chặt chẽ và năng động. Cái này dành cho CSS 3 & HTML 5

  1. Đầu tiên, cài đặt Width thành 100px là giới hạn. Đừng làm điều đó.

  2. Thứ hai, đặt chiều rộng của bộ chứa thành 100% sẽ hoạt động tốt, cho đến khi nói về việc nó là thanh tiêu đề / chân trang cho toàn bộ ứng dụng, như thanh điều hướng hoặc thanh tín dụng / bản quyền. Sử dụng right: 0;thay thế cho kịch bản đó.

  3. Bạn đang sử dụng id của (băm #container, #left, vv) thay vì các lớp học ( .container, .left, vv), mà là tốt, trừ khi bạn muốn lặp lại mô hình phong cách của bạn ở nơi khác trong mã của bạn. Tôi sẽ xem xét sử dụng các lớp học thay thế.

  4. Đối với HTML, không cần trao đổi thứ tự cho: trái, giữa và phải. display: inline-block;sửa lỗi này, trả lại mã của bạn cho một cái gì đó sạch hơn và hợp lý theo thứ tự một lần nữa.

  5. Cuối cùng, bạn cần phải xóa tất cả các phao để nó không gây rối với tương lai <div>. Bạn làm điều này vớiclear: both;

Để tóm tắt:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

Điểm thưởng nếu sử dụng HAML và SASS;)

HAML:

.container
  .left
  .center
  .right
  .clear

SASS:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}
— Eric Wanchic
nguồn
12

Có một số thủ thuật có sẵn để sắp xếp các yếu tố.

01. Sử dụng Trick Table

Hiển thị đoạn mã

02. Sử dụng Flex Trick

Hiển thị đoạn mã

03. Sử dụng Float Trick

Hiển thị đoạn mã

— Santosh Khalse
nguồn
11

Điều này có thể được thực hiện dễ dàng bằng CSS3 Flexbox, một tính năng sẽ được sử dụng trong tương lai (Khi <IE9hoàn toàn chết) bởi hầu hết mọi trình duyệt.

Kiểm tra bảng tương thích trình duyệt

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

Đầu ra:

Hiển thị đoạn mã

— Manoj Kumar
nguồn
4

Với bootstrap twitter: 

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>
— Ka.
nguồn
3

câu trả lời có thể, nếu bạn muốn giữ thứ tự của html và không sử dụng flex.

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

Mã liên kết bút

— Pruthvi P
nguồn
2

HTML:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; cung cấp cho trung tâm hoàn hảo phù hợp.

Bản trình diễn của JSFiddle

— Khalid Farhan
nguồn
Nó chỉ tập trung vào div trong ví dụ của bạn vì các thành phần văn bản có cùng kích thước, làm cho một văn bản dài hơn và #center div không còn ở trung tâm nữa: jsfiddle.net/3a4Lx239
— Kai Noack
1

Tôi đã làm một nỗ lực khác để đơn giản hóa điều này và đạt được nó mà không cần đến một container.

HTML 

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

Bạn có thể thấy nó trực tiếp tại JSFiddle

— người dùng15100
nguồn
1

Sử dụng Bootstrap 3 tôi tạo 3 div có chiều rộng bằng nhau (trong 12 cột bố trí 4 cột cho mỗi div). Bằng cách này, bạn có thể giữ khu vực trung tâm của mình ở giữa ngay cả khi các phần bên trái / phải có chiều rộng khác nhau (nếu chúng không tràn vào không gian của cột).

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

Để tạo cấu trúc đó mà không có thư viện, tôi đã sao chép một số quy tắc từ Bootstrap CSS.

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

Giao thông

— người chết
nguồn
0

Dưới đây là những thay đổi mà tôi đã phải thực hiện cho câu trả lời được chấp nhận khi tôi thực hiện điều này với một hình ảnh làm yếu tố trung tâm:

  1. Hãy chắc chắn rằng hình ảnh được đặt trong div ( #centertrong trường hợp này). Nếu nó không phải là, bạn sẽ phải thiết lập displayđể block, và nó có vẻ tương đối trung tâm để không gian giữa các yếu tố nổi.

  2. Đảm bảo đặt kích thước của cả hình ảnh và thùng chứa của nó:

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
— Sam
nguồn
0

Bạn có thể thử điều này:

Mã html của bạn như thế này:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

và mã css của bạn như thế này:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

vì vậy, đầu ra của nó sẽ có được như thế này:

[[LEFT]       [CENTER]        [RIGHT]]
— kishan Radadiya
nguồn
-1 
.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess
— shubham
nguồn
2
Chào mừng bạn đến với Stack Overflow! Vui lòng thêm một số giải thích về lý do tại sao mã này giúp OP. Điều này sẽ giúp cung cấp một câu trả lời người xem trong tương lai có thể học hỏi từ. Xem cách trả lời để biết thêm thông tin.
— Khỉ Heretic
-3

Bạn đã thực hiện nó một cách chính xác, bạn chỉ cần xóa phao của bạn. Đơn giản chỉ cần thêm 

overflow: auto;

đến lớp container của bạn.

— Mustapha ZEGAOULA
nguồn
-6

Giải pháp đơn giản nhất là xếp một bảng có 3 cột và căn giữa bảng đó.

html:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

css:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}
— Sthembiso F. Makhathini
nguồn
-10 
#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }
— byte
nguồn
2
Thay vì chỉ đăng một khối mã, vui lòng giải thích lý do tại sao mã này giải quyết vấn đề được đặt ra. Không có lời giải thích, đây không phải là một câu trả lời.
— Martijn Pieters
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.