Dua elemen blok sebaris, masing-masing lebarnya 50%, tidak pas berdampingan dalam satu baris

Question 1

<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

Kode di atas mencoba menempatkan div # kiri dan div #right, berdampingan, dalam satu baris. Tapi seperti yang Anda lihat di URL JSFiddle di atas, bukan itu masalahnya.

Saya dapat menyelesaikan masalah yang mengurangi lebar salah satu div menjadi 49%. Lihat http://jsfiddle.net/mUKSC/ . Tetapi ini bukan solusi yang ideal karena celah kecil muncul di antara dua div.

Cara lain saya bisa memecahkan masalah adalah dengan mengapung kedua div. Lihat http://jsfiddle.net/VptQm/ . Ini bekerja dengan baik.

Tapi pertanyaan asli saya tetap ada. Mengapa jika kedua div disimpan sebagai elemen blok sebaris, keduanya tidak pas berdampingan?

Question 2

Saat menggunakan inline-blockelemen, akan selalu ada whitespace masalah di antara elemen tersebut (ruang itu berukuran sekitar ~ 4px lebar).

Jadi, keduanya divs, yang keduanya memiliki lebar 50%, ditambah dengan whitespace(~ 4px) lebarnya lebih dari 100%, dan itu rusak. Contoh masalah Anda:

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Luaskan cuplikan

Ada beberapa cara untuk memperbaikinya:

1. Tidak ada spasi di antara elemen-elemen tersebut

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><div class="right">bar</div>

Luaskan cuplikan

2. Menggunakan komentar HTML

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div><!--
--><div class="right">bar</div>

Luaskan cuplikan

3. Atur orang tua font-sizemenjadi 0, dan kemudian tambahkan beberapa nilai pada inline-blockelemen

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

Luaskan cuplikan

4. Menggunakan margin negatif di antara keduanya ( tidak disukai )

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

Luaskan cuplikan

5. Menjatuhkan sudut penutupan

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

Luaskan cuplikan

6. Melewati tag penutup HTML tertentu (terima kasih @thirtydot untuk referensinya )

Tampilkan cuplikan kode

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}

<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

Luaskan cuplikan

Referensi:

Seperti @ MarcosPérezGude mengatakan , yang terbaik cara adalah dengan menggunakan rem, dan menambahkan beberapa nilai default untuk font-sizedi htmltag (seperti di HTML5Boilerplate ). Contoh:

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

Pembaruan : karena hampir 2018., gunakan flexbox atau bahkan lebih baik - tata letak kisi CSS .

Question 3

jawaban yang bagus di css3 adalah:

white-space: nowrap;

di node induk, dan:

white-space: normal;
vertical-align: top;

dalam div (atau lainnya) sebesar 50%

contoh: http://jsfiddle.net/YpTMh/19/

EDIT:

ada cara lain dengan:

font-size: 0;

untuk node induk dan menggantinya di node anak

Question 4

Itu karena spasi di antara dua div Anda ditafsirkan sebagai spasi. Jika Anda meletakkan <div>tag Anda sejajar seperti yang ditunjukkan di bawah, masalah diperbaiki :

<div id="left"></div><div id="right"></div>

Question 5

Karena ada ruang antar elemen. Jika Anda menghapus semua spasi, mereka akan muat .

<div id="left">Left</div><div id="right">Right</div>

Question 6

Buat mereka memblokir, bukan blok sebaris. Ini akan membuat div mengabaikan spasi di antara mereka.

display:block;

atau hapus spasi di antara tag

<div id='left'></div><div id='right'></div>

atau tambahkan

margin: -1en;

ke salah satu div untuk mengurangi ruang yang diambil oleh ruang tunggal yang diberikan.

Question 7

Silakan periksa kode di bawah ini:

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

Luaskan cuplikan

Question 8

Contoh Flexbox - ini akan digunakan untuk kelas induk yang memegang dua elemen berdampingan.

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Diambil dari memusatkan div secara vertikal di dalam div lain

Question 9

Ini bisa dilakukan dengan menambahkan css display: inline ke div yang menyimpan elemen inline.

Saat menghapus ruang putih menggunakan margin dengan nilai negatif, perlu untuk menambahkannya ke elemen khusus ini. Karena menambahkannya ke kelas akan memengaruhi tempat di mana kelas ini telah digunakan.

Jadi akan lebih aman menggunakan display: inline;

Question 10

tambahkan float: left; ke kedua tag div.

div {
  float: left;
}

Luaskan cuplikan