Saya ingin memiliki 3 divs disejajarkan di dalam wadah div, sesuatu seperti ini:
[[LEFT] [CENTER] [RIGHT]]
Wadah penampung 100% lebar (tidak ada set lebar), dan pusat div harus tetap di tengah setelah mengubah ukuran wadah.
Jadi saya mengatur:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
Tapi itu menjadi:
[[LEFT] [CENTER] ]
[RIGHT]
Ada tips?
overflow: hidden;
dicenter
kolom. Kemudian dalam permintaan media untuk perangkat kecil ketika saya memiliki semua 3 kolom di tengah halaman di atas satu sama lain, saya perluoverflow: hidden;
di baris tengah (yang merupakan kolom kanan pada perangkat besar) jika tidak memiliki tinggi dan tidak terpusat secara vertikal antara baris atas dan bawah.Jawaban:
Dengan CSS itu, tempatkan div Anda seperti itu (mengapung lebih dulu):
PS Anda juga bisa melayang ke kanan, lalu ke kiri, lalu ke tengah. Yang penting adalah bahwa pelampung datang sebelum bagian tengah "utama".
PPS Anda sering ingin yang terakhir di dalam
#container
cuplikan ini:<div style="clear:both;"></div>
yang akan meluas#container
secara vertikal untuk mengandung kedua sisi mengapung alih-alih mengambil ketinggiannya hanya dari#center
dan mungkin memungkinkan sisi-sisinya menonjol keluar dari bawah.sumber
border:solid
. Jika 100% maka lampirkan ke div lain untuk menempatkannya di dalam halaman Anda.Jika Anda tidak ingin mengubah struktur HTML Anda, Anda juga dapat melakukannya dengan menambahkan
text-align: center;
elemen pembungkus dan elemendisplay: inline-block;
ke pusat.Demo Langsung: http://jsfiddle.net/CH9K8/
sumber
Menyelaraskan Tiga Divs Secara Horizontal Menggunakan Flexbox
Berikut adalah metode CSS3 untuk menyelaraskan divs secara horizontal di dalam div lain.
jsFiddle
The
justify-content
properti membutuhkan waktu lima nilai-nilai:flex-start
(default)flex-end
center
space-between
space-around
Dalam semua kasus, tiga div berada di baris yang sama. Untuk deskripsi masing-masing nilai, lihat: https://stackoverflow.com/a/33856609/3597276
Manfaat flexbox:
Untuk mempelajari lebih lanjut tentang flexbox, kunjungi:
Dukungan browser: Flexbox didukung oleh semua browser utama, kecuali IE <10 . Beberapa versi browser terbaru, seperti Safari 8 dan IE10, memerlukan awalan vendor . Untuk cara cepat menambahkan awalan, gunakan Autoprefixer . Lebih detail dalam jawaban ini .
sumber
Properti float sebenarnya tidak digunakan untuk menyelaraskan teks.
Properti ini digunakan untuk menambahkan elemen ke kanan atau kiri atau tengah.
untuk
float:left
output akan[First][second][Third]
untuk
float:right
output akan[Third][Second][First]
Itu berarti properti float => left akan menambahkan elemen Anda berikutnya ke kiri yang sebelumnya, Sama halnya dengan kanan
Anda juga harus Mempertimbangkan lebar elemen induk, jika jumlah lebar elemen anak melebihi lebar elemen induk maka elemen berikutnya akan ditambahkan pada baris berikutnya
[Pertama kedua]
[Ketiga]
Jadi Anda perlu Mempertimbangkan Semua aspek ini untuk mendapatkan hasil yang sempurna
sumber
Saya suka batang saya ketat dan dinamis. Ini untuk CSS 3 & HTML 5
Pertama, mengatur Lebar ke 100px membatasi. Jangan lakukan itu.
Kedua, mengatur lebar penampung hingga 100% akan berfungsi dengan baik, sampai membicarakannya sebagai bilah header / footer untuk seluruh aplikasi, seperti bilah navigasi atau kredit / hak cipta. Gunakan
right: 0;
sebagai gantinya untuk skenario itu.Anda menggunakan id (hash
#container
,#left
dll) bukan kelas (.container
,.left
, dll), yang baik-baik saja, kecuali jika Anda ingin mengulang pola gaya Anda di tempat lain dalam kode Anda. Saya akan mempertimbangkan menggunakan kelas sebagai gantinya.Untuk HTML, tidak perlu menukar pesanan untuk: kiri, tengah, & kanan.
display: inline-block;
memperbaikinya, mengembalikan kode Anda ke sesuatu yang lebih bersih dan logis agar lagi.Terakhir, Anda perlu membersihkan semua pelampung agar tidak berantakan dengan masa depan
<div>
. Anda melakukan ini denganclear: both;
Untuk meringkas:
HTML:
CSS:
Poin bonus jika menggunakan HAML dan SASS;)
HAML:
KELANCANGAN:
sumber
Ada beberapa trik yang tersedia untuk menyelaraskan elemen.
01. Menggunakan Table Trick
Tampilkan cuplikan kode
02. Menggunakan Flex Trick
Tampilkan cuplikan kode
03. Menggunakan Trik Float
Tampilkan cuplikan kode
sumber
Ini dapat dengan mudah dilakukan menggunakan CSS3 Flexbox, sebuah fitur yang akan digunakan di masa depan (Ketika
<IE9
sudah benar-benar mati) oleh hampir setiap browser.Periksa Tabel Kompatibilitas Browser
HTML
CSS
Keluaran:
Tampilkan cuplikan kode
sumber
Dengan twitter bootstrap:
sumber
kemungkinan jawabannya, jika Anda ingin menjaga urutan html dan tidak menggunakan flex.
HTML
CSS
Tautan Pena Kode
sumber
HTML:
CSS:
text-align:center;
memberikan perataan tengah yang sempurna.Demo JSFiddle
sumber
Saya melakukan upaya lain untuk menyederhanakan ini dan mencapainya tanpa perlu wadah.
HTML
CSS
Anda bisa melihatnya langsung di JSFiddle
sumber
Menggunakan Bootstrap 3 saya membuat 3 divs dengan lebar yang sama (dalam tata letak 12 kolom 4 kolom untuk setiap div). Dengan cara ini Anda dapat menjaga zona tengah Anda terpusat bahkan jika bagian kiri / kanan memiliki lebar yang berbeda (jika mereka tidak meluap ruang kolom mereka).
HTML:
CSS:
CodePen
Untuk membuat struktur itu tanpa perpustakaan saya menyalin beberapa aturan dari Bootstrap CSS.
HTML:
CSS:
CopePen
sumber
Berikut adalah perubahan yang harus saya buat untuk jawaban yang diterima ketika saya melakukan ini dengan gambar sebagai elemen tengah:
#center
dalam hal ini). Jika tidak, Anda harus mengaturdisplay
keblock
, dan tampaknya memusatkan relatif ke ruang antara elemen melayang.Pastikan untuk mengatur ukuran gambar dan wadahnya:
sumber
Anda dapat mencoba ini:
Kode html Anda seperti ini:
dan kode css Anda seperti ini:
jadi, outputnya harus seperti ini:
sumber
sumber
Anda telah melakukannya dengan benar, Anda hanya perlu membersihkan kendaraan Anda. Cukup tambahkan
ke kelas kontainer Anda.
sumber
Solusi termudah adalah dengan membuat tabel dengan 3 kolom dan pusatkan tabel itu.
html:
css:
sumber
sumber