Bagaimana cara mengapung 3 divs berdampingan menggunakan CSS?

270

Saya tahu cara membuat 2 div mengapung berdampingan, cukup mengambang satu ke kiri dan yang lainnya ke kanan.

Tetapi bagaimana melakukan ini dengan 3 divs atau saya harus menggunakan tabel untuk tujuan ini?

css css-float Dameon
sumber

3

Tidak cukup informasi. Berapa lebar lapisannya?

Josh Stodola

8

Saya akan display: inline-blockorang-orang itu daripada melayang mereka. Jika total lebarnya kurang dari lebar kontainer, mereka akan duduk bersebelahan.

Adam Waite

Saya sarankan menggunakan "display: table". Ini adalah solusi yang paling dapat dipelihara dan dapat diandalkan. lihat stackoverflow.com/questions/14070787/…

John Henckel

300

Beri mereka lebar dan float: left;, inilah sebuah contoh:

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

Nick Craver
sumber

6

Bagaimana jika Anda ingin semuanya berkembang saat halaman diperluas?

CodyBugstein

31

@imray cukup gunakan% daripada px

TehTris

9

Bisakah Anda menguraikan mengapa harus digunakan <br style="clear: left;" />dengan gaya itu pada khususnya.

Mike de Klerk

2

@MikedeKlerk ini adalah perbaikan yang jelas, untuk menghindari runtuhnya induk.

Angel Politis

seperti yang dijelaskan @Nick Craver, Anda harus memberikan semua elemen Anda properti float: left . Ini terjadi karena properti float menentukan bagaimana elemen ditempatkan di sepanjang sisi kiri atau kanan wadah induknya .

Nesha Zoric

130

Cara modern adalah dengan menggunakan flexbox CSS , lihat tabel dukungan .

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

Luaskan cuplikan

Anda juga dapat menggunakan kisi CSS , lihat tabel dukungan .

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

Luaskan cuplikan

Stiker
sumber

52

Ini adalah cara yang sama seperti yang Anda lakukan untuk dua div, hanya mengambang yang ketiga ke kiri atau kanan juga.

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

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

Sarfraz
sumber

3

Tapi DIV adalah elemen level blok, kan? Lalu bagaimana mereka ditempatkan berdampingan dan tidak di baris berikutnya (sebagai elemen level blok dimulai dan diakhiri dengan jeda baris). Apakah float memiliki pengaruh lain terhadapnya juga?

Ashwin

26

mengapung mereka semua pergi

pastikan lebar ditentukan bahwa mereka semua dapat masuk ke dalam wadah mereka (baik div lain atau jendela), kalau tidak mereka akan membungkus

davidosomething
sumber

23

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

kode yang diposting seseorang di sana, itu berhasil !!! ketika saya menempelkannya tepat sebelum menutup Container DIV, ada baiknya membersihkan semua DIV berikutnya agar tidak tumpang tindih dengan DIV yang saya buat berdampingan di bagian atas!

<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!--  then magic trick comes here  -->
<br style="clear: left;" />
</div>

tadaa !! :)

Migisha
sumber

16

Float ketiga div ke kiri. Seperti di sini:

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

Arwen
sumber

6

Intinya adalah bahwa jawaban saya adalah yang paling benar dan ketika orang baru akan mencari Q ini di internet mereka akan menemukan jawaban saya yang akan sangat membantu mereka.

Arwen

2

Itu mungkin. Tetapi tidak ada penjelasan. Tidak apa-apa di situs ini untuk menyalin jawaban lain, menggabungkan beberapa jawaban parsial menjadi satu jawaban yang lebih baik. Anda dapat mengedit dan menyelesaikan milik Anda. Namun pengguna baru memiliki beberapa batasan (upvoting, beberapa tautan), jadi saya tetap merekomendasikan untuk tidak fokus pada pertanyaan lama dan dijawab.

cfi

@ cfi terima kasih, saya akan menyimpannya untuk referensi di masa mendatang.

Arwen

10

Saya biasanya hanya melayang yang pertama ke kiri, yang kedua ke kanan. Yang ketiga secara otomatis menyelaraskan di antara mereka.

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

Nick Travers
sumber

5

Bukankah itu menyebabkan kekacauan ketika browser diubah ukurannya?

CodyBugstein

10

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

keuntungan dari cara ini adalah Anda dapat mengatur masing-masing lebar kolom independen dari yang lain selama Anda menyimpannya di bawah 100%, jika Anda menggunakan 3 x 30% sisanya 10% dibagi sebagai ruang pembagi 5% antara kolom

SugaComa
sumber

7

Anda dapat mengapung: ke kiri untuk semuanya dan atur lebarnya menjadi 33,333%

Daniel A. White
sumber

7

coba tambahkan "display: block" ke style

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


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

Ann
sumber

6

Saya tidak melihat jawaban bootstrap, jadi untuk apa nilainya:

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

biarkan Bootstrap mencari tahu persentase. Saya suka menghapus keduanya, untuk jaga-jaga.

John Grabauskas
sumber

1

Dalam bootstrap 4, saya pikir Anda harus membungkus semuanya dalam div dengan kelas baris.

John Grabauskas

5

Saya lebih suka metode ini, mengapung kurang didukung di versi IE yang lebih lama (sungguh? ...)

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

DIPERBARUI: Tentu saja, untuk menggunakan teknik ini dan karena posisi absolut Anda perlu melampirkan divs pada wadah dan melakukan postprocessing untuk menentukan ketinggian jika, sesuatu seperti ini:

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

Bukan hal yang paling menakjubkan di dunia, tetapi setidaknya tidak merusak IE yang lebih lama.

jpbourbon
sumber

Tentu saja, untuk menggunakan teknik ini dan karena posisi absolut Anda perlu melampirkan divs pada wadah dan melakukan postprocessing untuk menentukan ketinggian jika, sesuatu seperti ini:

jpbourbon

jQuery (document) .ready (function () {jQuery ('. main'). height (Math.max (jQuery ('. kolom-kiri'). height (), jQuery ('. kolom-kanan'). height (), jQuery ('. kolom-tengah'). height ()));}); Bukan hal yang paling menakjubkan di dunia, tetapi setidaknya tidak merusak IE yang lebih lama.

jpbourbon

4

Tetapi apakah itu bekerja di Chrome?

Float setiap div dan atur jelas; keduanya untuk baris. Tidak perlu mengatur lebar jika Anda tidak mau. Bekerja di Chrome 41, Firefox 37, IE 11

Klik untuk 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;

}

AndrewD
sumber

3

Inilah cara saya berhasil melakukan sesuatu yang mirip dengan ini di dalam <footer>elemen:

<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 Maccaferri
sumber

2

@Leniel metode ini bagus tetapi Anda harus menambahkan lebar ke semua div mengambang. Saya akan mengatakan membuat mereka sama lebar atau menetapkan lebar tetap. Sesuatu seperti

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

Anda dapat menetapkan nama kelas untuk setiap div daripada menambahkan inline style, yang bukan praktik yang baik.

Pastikan untuk menggunakan clearfix div atau clear div untuk menghindari konten berikut tetap di bawah div ini.

Anda dapat menemukan detail tentang cara menggunakan clearfix div di sini

aquaaarian
sumber

Bagaimana cara mengapung 3 divs berdampingan menggunakan CSS?

Jawaban:

Tetapi apakah itu bekerja di Chrome?

HTML

CSS