Bagaimana cara menyelaraskan span atau div secara horizontal?

88

Satu-satunya masalah saya adalah membuat mereka berbaris tiga dan memiliki jarak yang sama. Rupanya, bentang tidak boleh memiliki lebar dan div (dan bentang dengan display: block) tidak muncul secara horizontal berdampingan satu sama lain. Saran?

<div style='width:30%; text-align:center; float:left; clear:both;'> Apakah yang saya miliki sekarang.

css html Thomas Owens
sumber
2
Mengapa Anda tidak ingin menggunakan tabel?
DOK
63
Karena datanya tidak berbentuk tabel.
Thomas Owens
10
Jawaban di bawah ini cocok, tetapi pertimbangkan bahwa menggunakan tabel akan mengurangi sakit kepala jika Anda akhirnya membuat hal-hal menjadi lebih rumit. Tidak masalah menggunakan tabel jika itu membuat pekerjaan Anda lebih mudah. Bersikaplah pragmatis! :-)
Rahul
5
serius, jangan gunakan meja. Hal semacam ini mudah dilakukan dengan CSS.
Sam Murray-Sutton
26
"Tidak apa-apa menggunakan meja jika itu membuat pekerjaan Anda lebih mudah." adalah nasihat yang sangat buruk . Mohon abaikan! :)
Bobby Jack

Jawaban:

78

Anda dapat menggunakan div dengan float: left;atribut yang akan membuatnya muncul secara horizontal di samping satu sama lain, tetapi Anda mungkin perlu menggunakan pembersihan pada elemen berikut untuk memastikannya tidak tumpang tindih.

jmcd
sumber
17
Sebenarnya, Anda bisa menyetelnya overflow: hidden. Lihat: stackoverflow.com/questions/323599/…
David Wolever
2
Saya menemukan bahwa ini dapat merusak tata letak di div berikutnya. Misalnya, jika saya menggunakan solusi Anda, dan kemudian mencoba padding-leftdi div di sebelah kanan, itu akan diabaikan.
Sebastian Mach
3
Tidak ada alasan untuk berpikir berlebihan: <div style="display: in-line"></div><div style="display: in-line"></div>seharusnya berfungsi dengan baik.
zoltar
1
menggunakan float memperkenalkan sejumlah besar masalah baru. overflow: hiddenadalah solusi terbaik.
saran3h
40

Kamu dapat memakai

.floatybox {
     display: inline-block;
     width: 123px;
}

Jika Anda hanya perlu mendukung browser yang memiliki dukungan untuk blok inline. Blok sebaris bisa memiliki lebar, tetapi sebaris, seperti elemen tombol.

Oh, dan Anda mungkin ingin menambahkan vertical-align: top pada elemen untuk memastikan semuanya sejajar

runeh
sumber
1
perataan vertikal tidak berfungsi pada elemen tingkat blok. Dalam hal ini kita berbicara tentang elemen yang tampilannya telah diatur ke blok-inline.
runeh
1
inline-block sekarang didukung di setiap browser kelas A kecuali IE6 / 7, tetapi ada peretasan agar blok-inline berfungsi di IE6 / 7.
Alexander Bird
13

Jawabanku:

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

Mengapa?

Secara teknis, Span adalah elemen sebaris, namun bisa memiliki lebar, Anda hanya perlu menyetel properti tampilannya untuk diblokir terlebih dahulu. Namun, dalam konteks ini, div mungkin lebih tepat, karena saya menduga Anda ingin mengisi div ini dengan konten.

Satu hal yang pasti tidak ingin Anda lakukan adalah clear:bothmenyetel div. Menyetelnya seperti itu berarti browser tidak akan mengizinkan elemen apa pun untuk duduk di baris yang sama dengannya. Hasilnya, elemen Anda akan menumpuk.

Perhatikan, penggunaan display:inline. Ini berhubungan dengan bug penggandaan margin ie6. Anda dapat menangani ini dengan cara lain jika perlu, misalnya stylesheet bersyarat.

Saya telah menambahkan pembungkus (# apa pun) karena saya menduga ini bukan satu-satunya elemen di halaman, jadi Anda hampir pasti perlu memisahkannya dari elemen halaman lainnya.

Bagaimanapun, saya harap itu membantu.

Sam Murray-Sutton
sumber
Ini sepertinya tidak berhasil ketika saya memotong dan menempelkannya ke jsfiddle
Jamie Fristrom
1
Maaf, salah ketik di sana; Saya harus meletakkan titik koma setelah masing-masing baris tersebut, kemudian berhasil; Saya telah mengeditnya sesuai. Meskipun telah meninjau pertanyaan ini lagi, saya menyarankan OP perlu menambahkan sedikit kode lagi ke contohnya. Seperti yang ditunjukkan oleh jawaban di sini, ada berbagai pendekatan yang dapat digunakan di sini dan apa yang Anda gunakan akan bergantung pada konteksnya.
Sam Murray-Sutton
4

Anda dapat melakukan: 

<div style="float: left;"></div>

atau 

<div style="display: inline;"></div>

Salah satunya akan menyebabkan div ubin secara horizontal.

Jeremy B.
sumber
3

Saya akan melakukannya seperti ini karena memberi Anda 3 kolom berukuran genap, bahkan jarak dan skala (genap). Catatan: Ini belum diuji jadi mungkin perlu mengutak-atik browser lama.

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>
monyet lakukan
sumber
2

Saya akan menggunakan:

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%; 
}
.sidebox { 
float: right;
width: 30%; 
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox"> 
       SideboxContent
   </div>
</div>

Ini pertama kalinya saya menggunakan 'alat kode' ini dari luapan ... tapi harus dilakukan sekarang ...

talevineto
sumber
1

Apa yang mungkin ingin Anda lakukan adalah mencari tata letak berbasis kisi CSS. Metode tata letak ini melibatkan penetapan beberapa kelas CSS untuk menyelaraskan konten halaman ke struktur kisi. Ini lebih terkait erat dengan tata letak print-bsed daripada berbasis web, tetapi ini adalah teknik yang digunakan di banyak situs web untuk mengatur tata letak konten ke dalam struktur tanpa harus menggunakan tabel.

Cobalah ini sebagai permulaan dari Smashing Magazine.

marcus.greasly
sumber
0

Lihatlah properti Float css. http://w3schools.com/css/pr_class_float.asp

Ia bekerja dengan elemen blok seperti div. Atau, apa yang Anda coba tampilkan, tabel tidak jahat jika Anda benar-benar mencoba menampilkan tabel berisi beberapa informasi.

Nick
sumber
Tapi itu bukan meja. Mereka hanya tiga hal yang ingin saya tampilkan di samping satu sama lain.
Thomas Owens
404 halaman tidak ditemukan
Ali Yousefi
0

Saya akan mencoba memberi mereka semua display: block;atribut dan penggunaanfloat: left; .

Anda kemudian dapat mengatur widthdan / atau heightsesuka Anda. Anda bahkan dapat menentukan beberapa aturan perataan vertikal.

d1rk
sumber
0 
    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

yang lain ... coba gunakan float: left;atau right;, ubah widthuntuk nilai lain ... itu akan berfungsi ... juga perhatikan bahwa 10% yang tidak digunakan oleh div adalah di antara mereka ... maaf untuk bahasa Inggris yang buruk :)

talevineto
sumber