Bisakah saya mencapai tata letak ini menggunakan CSS float?

Seperti banyak pengembang front-end yang pernah saya temui dalam karier saya, saya memahami HTML, CSS, dan JavaScript pada tingkat yang mahir, tetapi poin-poin penting dari float CSS masih menjadi kelemahan saya.

Proyek terbaru saya memiliki tata letak sederhana yang sepertinya merupakan kandidat sempurna untuk meningkatkan pemahaman saya tentang pelampung. Hal ini sepele untuk dicapai dengan penentuan posisi absolut, tetapi saya ingin menentukan apakah pelampung dapat mencapai hal yang sama.

Berikut mockup sederhana dari tata letak yang diinginkan:

mockup sederhana

Saya menyiapkan contoh JSBin sebagai titik awal yang baik:

http://jsbin.com/UPUzUWU/1/edit?html,css,output

Saya telah menghabiskan sekitar 20 menit bermain-main dengan kotak mana yang diapungkan, bagaimana kotak tersebut diapungkan, kotak mana yang dibersihkan, bagaimana kotak tersebut dibersihkan, dan bahkan pengurutan HTML. Aku sudah agak dekat, tapi tidak ada cerutu.

Adakah yang bisa membuat ini berfungsi tanpa menggunakan pemosisian absolut (menyusun ulang HTML boleh saja jika diperlukan)? Jika ya, bisakah Anda juga berusaha menjelaskan prinsip di baliknya?

Terima kasih!

Sunting:

Maaf, saya seharusnya mengklarifikasi - meskipun menyusun ulang HTML untuk kotak-kotak itu baik-baik saja, saya lebih suka tidak menggabungkan beberapa kotak menjadi elemen induk yang sama. Harap asumsikan bahwa secara semantik, semua ini akan menyimpan konten pada tingkat hierarki tata letak yang sama (yaitu, semuanya merupakan saudara semantik), jadi idealnya mereka tidak akan berbagi elemen induk non-semantik yang hanya ada untuk tujuan menyederhanakan gaya .

Selain itu, pendekatan tersebut memungkinkan untuk mengapungkan tiga elemen ke kiri, yang merupakan solusi yang terlalu mendasar untuk menjelaskan lebih lanjut cara kerja pelampung.


html css css-float
person Bungle    schedule 25.01.2014    source sumber
comment
Bisakah htmlnya diubah? misalnya: kotak 1 dan kotak 2 dibungkus dengan div?   -  person Ani    schedule 26.01.2014
comment
Jika Anda dapat mengubah HTML untuk menambahkan penampung: jsbin.com/UPUzUWU/6/edit   -  person Zach Saucier    schedule 26.01.2014
comment
Saya berasumsi semua div harus berada dalam satu elemen induk? Jika tidak ada solusi, buatlah 3 kolom, dengan 2 div ditumpuk di kolom kiri dan kanan, lalu satu div di tengah.   -  person jd182    schedule 26.01.2014
comment
jsbin.com/UPUzUWU/9/edit (hanya satu float, tidak ada perubahan struktur html, tetapi ... margin negatif :))   -  person sinisake    schedule 26.01.2014
comment
Terima kasih semuanya - ya, saya seharusnya menyebutkan bahwa saya memilih untuk tidak mengubah struktur HTML dengan menambahkan elemen induk. Akan memperbarui pertanyaannya sekarang.   -  person Bungle    schedule 26.01.2014
comment
@jd182: Terima kasih! Itu adalah hal terdekat yang saya lihat sejauh ini dengan apa yang ingin saya capai; akan tetap baik untuk menentukan apakah hal itu mungkin dilakukan tanpa menggunakan margin negatif.   -  person Bungle    schedule 26.01.2014
comment
Bisakah kita mengubah urutan div?   -  person Ani    schedule 26.01.2014
comment
@Ani: Ya, tidak apa-apa. Pengurutan tidak terlalu signifikan, hanya menambahkan wadah HTML baru yang menurut saya tidak semantik.   -  person Bungle    schedule 26.01.2014
comment
Hai, bisakah saya menggunakan properti clear?   -  person amaro    schedule 28.01.2014
comment
@amaro: Tentu saja! Untuk lebih jelasnya, saya tidak mencoba menjadikan ini sebagai latihan yang dibatasi secara artifisial - saya hanya mencoba melihat apakah mungkin untuk membuat tata letak jenis ini menggunakan pelampung alih-alih pemosisian absolut, yang selalu menjadi tujuan saya. Dalam prosesnya, saya berharap untuk lebih memahami nuansa pelampung.   -  person Bungle    schedule 29.01.2014

Jawaban (3)


arrow_upward
3
arrow_downward

Di sini: http://jsbin.com/UPUzUWU/11/edit

 <div class="box-holder">
    <div class="vertdiv">
     <div class="box box-1 box-square">1</div>
     <div class="box box-2 box-square">2</div>
    </div>
    <div class="box box-3 box-tall">3</div>
    <div class="vertdiv">
      <div class="box box-4 box-square">4</div>
      <div class="box box-5 box-square">5</div>
    </div>
 </div>

CSS

.vertdiv{
   float:left;
 }

 .box-tall {
   float: left;
   height: 200px;
 }

Menggunakan Persentase: http://jsbin.com/UPUzUWU/13/edit

CSS

.box-square {
   width:100%;
   height: 50%;
 }

 .box-tall {
    float:left;
    height: 100%;
    width:34%;
 }

 .vertdiv{
   float:left;
   width:33%;
   height:100%;
 }
person Ani    schedule 25.01.2014
comment
Hebat!, bisakah Anda melakukannya dengan % alih-alih piksel? - person Francisco Corrales Morales; 26.01.2014
comment
Ya...saya bisa...Tunggu - person Ani; 26.01.2014
comment
@Ani: Terima kasih banyak atas jawaban Anda! Silakan lihat hasil edit saya di atas - lebih memilih untuk menghindari penggunaan elemen induk tambahan. - person Bungle; 26.01.2014
comment
Orang-orang seperti Anda membuat StackOverflow berharga! - person Francisco Corrales Morales; 26.01.2014

arrow_upward
1
arrow_downward

Berikut adalah solusi tinggi & lebar penuh dan sepenuhnya responsif: http://jsbin.com/upAFigEp/2/edit

person Sergei Beregov    schedule 25.01.2014
comment
Terima kasih atas jawaban Anda, Sergei! Silakan lihat klarifikasi saya untuk pertanyaan tersebut - Saya lebih memilih untuk menghindari penggunaan elemen induk non-semantik. Tata letak yang lancar/responsif sangat bagus tetapi bukan suatu keharusan. - person Bungle; 26.01.2014

arrow_upward
0
arrow_downward

Lihat JsFiddle ini.

    .box-holder {
  width: 300px;
  height: 200px;
  background-color: #fff;
  position: absolute;
}

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

.box-square {
  height: 100px;
}

.box-tall {
  height: 200px;
}

.box-1 {
  background-color: #eee;
  float:left;
}

.box-2 {
  background-color: #ddd;
    float:left;
    position: absolute;
    top: 100px;
}

.box-3 {
  background-color: #ccc;
}

.box-4 {
  background-color: #bbb;
}

.box-5 {
  background-color: #aaa;
}
person Siva    schedule 26.01.2014
comment
Terima kasih Siva - tapi ini masih mengandalkan positioning absolut untuk .box-2. Apakah ada cara untuk menghindarinya? - person Bungle; 26.01.2014