Sejajarkan elemen <div> berdampingan

127

Saya tahu ini adalah pertanyaan yang agak sederhana, tetapi saya tidak bisa memahaminya untuk kehidupan saya. Saya memiliki dua tautan tempat saya menerapkan gambar latar belakang. Begini tampilannya saat ini (permintaan maaf untuk bayangan, hanya sketsa kasar dari sebuah tombol):

masukkan deskripsi gambar di sini

Namun, saya ingin kedua tombol itu berdampingan. Saya benar-benar tidak tahu apa yang harus dilakukan dengan penyelarasan.

Inilah HTML-nya

<div id="dB"}>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> 
</div>
<div id="gB">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>     
</div>

Inilah CSS-nya

#buyButton {
    background: url("assets/buy.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:232px;
     text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}

#galleryButton {
    background: url("images/galleryButton.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:230px;
     text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}
css html alignment sudo rm -rf
sumber
5
Yang pertama terlintas dalam pikiran dengan hanya membaca judulnya adalahfloat:left;
JCOC611
2
@ JCOC611: Menerapkan float:left;ke keduanya divmelakukannya dengan sempurna. Bisakah Anda memposting komentar Anda sebagai jawaban? Terima kasih!
sudo rm -rf
1
Dan yang kedua adalah display: inline-block;tetapi itu kurang didukung ...
JV
1
float: ditinggalkan di dalam wadah akan berfungsi, tetapi saya akan mencoba menggunakan dua tag <span> alih-alih <div> untuk tombol.
shiftycow
Seperti yang telah disebutkan, menambahkan float: left; ke #buyButton dan #galleryButton, lalu tambahkan elemen lain dengan jelas: keduanya; untuk menghapus mengambang. Mengapa menggunakan divs (memblokir elemen) untuk membungkus <a>?
ludesign

Jawaban:

154

Berlaku float:left;untuk kedua div Anda harus membuatnya berdiri berdampingan.

JCOC611
sumber
Apakah saya salah, atau apakah clear:both;perlu masuk ke suatu tempat? Saya belum pernah menggunakan CSS, tetapi tampaknya khas ketika saya melihat mengapung untuk melihat jelas juga.
Brad Christie
4
clear:bothakan melakukan sebaliknya. "Elemen setelah elemen mengambang akan mengalir di sekitarnya. Untuk menghindari ini, gunakan properti yang jelas."
JCOC611
@ JCOC611: Ah, begitu jelas biasanya mengikuti ketika Anda ingin kemampuan float sesaat? Masuk akal. Terima kasih untuk pelajarannya. ;-)
Brad Christie
7
Hanya untuk menjadi "jelas," (mengerikan, saya tahu), Anda perlu menggunakan <br style="clear: both;" />jika Anda memiliki div ketiga yang Anda inginkan di bawah dua yang selaras.
Tass
3
@Tass Anda hanya perlu memiliki div ketiga Anda seperti ini: <div style="clear: both;">...</div>(tidak diperlukan br)
intrepidis
136

Waspadalah float: left… 🤔

... ada banyak cara untuk menyelaraskan elemen secara berdampingan.

Di bawah ini adalah cara paling umum untuk mencapai dua elemen secara berdampingan ...

Demo: Lihat / edit semua contoh di bawah ini pada Codepen

Gaya dasar untuk semua contoh di bawah ini ...

Beberapa gaya css dasar untuk parentdan childelemen dalam contoh ini:

.parent {
  background: mediumpurple;
  padding: 1rem;
}
.child {
  border: 1px solid indigo;
  padding: 1rem;
}

mengapung: kiri

Menggunakan floatsolusi saya, pengaruh yang tidak diinginkan pada elemen lain. (Petunjuk: Anda mungkin perlu menggunakan perbaikan yang jelas .)

html

<div class='parent'>
  <div class='child float-left-child'>A</div>
  <div class='child float-left-child'>B</div>
</div>

css

.float-left-child {
  float: left;
}

display: inline-block

html

<div class='parent'>
  <div class='child inline-block-child'>A</div>
  <div class='child inline-block-child'>B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

Catatan : ruang antara dua elemen anak ini dapat dihapus, dengan menghapus ruang antara tag div:

display: inline-block (tanpa spasi)

html

<div class='parent'>
  <div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>

css

.inline-block-child {
  display: inline-block;
}

display: flex

html

<div class='parent flex-parent'>
  <div class='child flex-child'>A</div>
  <div class='child flex-child'>B</div>
</div>

css

.flex-parent {
  display: flex;
}
.flex-child {
  flex: 1;
}

display: inline-flex

html

<div class='parent inline-flex-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

css

.inline-flex-parent {
  display: inline-flex;
}

tampilan: kotak

html

<div class='parent grid-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

css

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr
}
Beau Smith
sumber
2
Ya, tapi saya dengar menggunakan inline-blockbeberapa masalah kompatibilitas. Juga, ada untungnya menggunakan lebih dari itu float?
sudo rm -rf
1
Ya, inline-blockini lebih baru, jadi peramban besar Anda mungkin belum mendukungnya (meskipun ada banyak properti khusus peramban dan juga solusi untuk ini). Keuntungannya adalah elemen yang mengandung akan membungkus elemen; dengan floatAnda harus menambahkan css ke elemen induk.
Beau Smith
12

tetap sederhana

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
Miguel Rão Vieira
sumber