Bagaimana cara menyelaraskan elemen div?

Tubuh saya dokumen html terdiri dari 3 elemen, tombol, bentuk, dan kanvas. Aku ingin tombol dan bentuk harus benar selaras dan kanvas untuk menginap kiri sejajar. Masalahnya adalah ketika saya mencoba untuk menyelaraskan dua elemen pertama, mereka tidak lagi mengikuti satu sama lain dan bukannya di samping satu sama lain secara horizontal?, berikut kode yang saya punya sejauh ini, aku ingin bentuk untuk mengikuti langsung setelah tombol di sebelah kanan dengan tidak ada ruang di antara.

#cTask {
  background-color: lightgreen;
}

#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  float: right;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <script type="text/javascript" src="timeline.js"></script>
  <link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>

<body bgcolor="000" TEXT="FFFFFF">
  <div id="button">
    <button onclick="showForm()" type="button" id="cTask">
        Create Task
    </button>
  </div>
  <div id="addEventForm">
    <form>
      <p><label>Customer name: <input></label></p>
      <p><label>Telephone: <input type=tel></label></p>
      <p><label>E-mail address: <input type=email></label></p>
    </form>
  </div>
  <div>
    <canvas id="myBoard" width="1000" height="600">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>
MJN Belief
Pertanyaan edit 4 Februari 2018 в 9:55
Pemrograman
html5 css
7 Oktober 2011 в 9:54
10 tayangan

mengapung ok, tapi bermasalah dengan ie6 & 7.

i'a lebih memilih untuk menggunakan margin-left:auto; margin-right:0; di dalam div.

Komentar (16)
Larutan

Anda dapat membuat sebuah div yang berisi bentuk & tombol, kemudian membuat div float ke kanan dengan menetapkan float: right;.

Mariusz Jamro
Jawaban edit 5 Agustus 2015 в 2:26
Komentar (2)

Jawaban yang tua. Update: gunakan flexbox, cukup banyak bekerja di semua browser yang sekarang.

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>

Dan anda bisa mendapatkan bahkan lebih menarik, cukup:

<div style="display: flex; justify-content: space-around">
  <div>Left</div>
  <div>Right</div>
</div>

Dan lebih menarik:

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>
Komentar (3)

Jawaban lain untuk pertanyaan ini adalah tidak begitu baik sejak float:right bisa pergi ke luar dari orang tua div (overflow: hidden untuk orang tua kadang-kadang mungkin bisa membantu) dan margin-left: auto, margin-right: 0 bagi saya didn't bekerja di kompleks bersarang div (I didn't menyelidiki mengapa).

I've tahu bahwa untuk unsur-unsur tertentu text-align: right bekerja, dengan asumsi ini bekerja ketika elemen dan orang tua yang baik inline atau inline-block.

Catatan: text-align CSS properti menggambarkan bagaimana inline konten seperti teks sejajar di blok induknya elemen. text-align tidak mengontrol penyelarasan blok elemen itu sendiri, hanya mereka inline konten.

Contoh:

<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
    <div style="display: block; width: 100%">
        I'm parent
    </div>
    <div style="display: inline-block; text-align: right; width: 100%">
        Caption for parent
    </div>
</div>

[Di sini's JS Fiddle][1].

Alex
Jawaban edit 9 Februari 2016 в 1:38
Komentar (0)

Maksudmu seperti ini? http://jsfiddle.net/6PyrK/1

Anda dapat menambahkan atribut float:right dan clear:both; untuk form dan tombol

Hanna
Jawaban edit 5 Agustus 2014 в 5:19
Komentar (0)

Jika anda memiliki beberapa divs yang anda inginkan selaras berdampingan di ujung kanan div induk, set text-align: right; pada orang tua div.

Komentar (0)

Anda dapat menggunakan flexbox dengan flex-tumbuh untuk mendorong elemen terakhir ke kanan.

``

Waktu
Benar
``
Komentar (0)

Jika anda don't harus mendukung IE9 dan di bawah ini anda dapat menggunakan flexbox untuk memecahkan masalah ini: codepen

Ada's juga beberapa bug dengan IE10 dan 11 (flexbox dukungan), tapi mereka tidak hadir dalam contoh ini

Anda dapat vertikal menyelaraskan <tombol> dan<form> dengan membungkus mereka dalam sebuah wadah dengan flex-arah: kolom. Sumber urutan unsur-unsur yang akan menjadi urutan di mana mereka're ditampilkan dari atas ke bawah sehingga aku mengatur kembali mereka.

Anda kemudian dapat secara horizontal menyelaraskan bentuk & tombol wadah dengan kanvas dengan membungkus mereka dalam sebuah wadah dengan flex-arah: baris. Lagi sumber urutan unsur-unsur yang akan menjadi urutan di mana mereka're ditampilkan dari kiri ke kanan jadi saya mengatur kembali mereka.

Juga, ini akan mengharuskan anda untuk menghapus semua posisi dan float gaya-aturan dari kode yang terkait dalam pertanyaan.

Berikut ini's terpangkas versi HTML di codepen terkait di atas.

<div id="mainContainer">
  <div>

  </div>
  <div id="formContainer">
    <div id="addEventForm"> 

    </div>
    <div id="button">

    </div>
  </div>
</div>

Dan di sini adalah relevan CSS

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}
Bates550
Jawaban edit 12 November 2016 в 1:02
Komentar (0)

Anda hanya dapat menggunakan padding-left:60% (bagi ex) untuk menyelaraskan konten ke kanan dan secara bersamaan bungkus isi responsif dalam wadah (saya diperlukan navbar di kasus saya) untuk memastikan itu bekerja pada semua contoh.

Komentar (0)

Jika anda menggunakan bootstrap, maka:

<div class="pull-right"></div>
anil shrestha
Jawaban edit 10 Juni 2019 в 5:51
Komentar (1)

Saya tahu ini adalah sebuah posting lama tapi tidak't anda hanya menggunakan <div id=xyz align="benar"> untuk kanan.

Anda hanya bisa ganti right dengan left, center, dan justify.

Bekerja di situs saya:)

McGarnagle
Jawaban edit 30 Mei 2014 в 7:23
Komentar (3)