Her biri% 50 genişlikte iki satır içi blok eleman, tek bir sıraya yan yana sığmaz

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/

Yukarıdaki kod, #left div ve #right div'i tek bir satıra yan yana yerleştirmeye çalışıyor. Ancak yukarıdaki JSFiddle URL'sinde görebileceğiniz gibi, durum böyle değil.

Bölmelerden birinin genişliğini% 49'a düşüren sorunu çözebiliyorum. Bkz http://jsfiddle.net/mUKSC/ . Ancak bu ideal bir çözüm değildir çünkü iki div arasında küçük bir boşluk görünür.

Sorunu çözebilmemin başka bir yolu, her iki div'i de yüzdürmektir. Görmek http://jsfiddle.net/VptQm/ . Bu iyi çalışıyor.

Ama asıl sorum kalır. Neden her iki div de satır içi blok öğeler olarak tutulduğunda yan yana sığmıyorlar?

Question 2

inline-blockÖğeleri kullanırken , whitespace bu öğeler arasında her zaman bir sorun olacaktır (bu alan yaklaşık 4 piksel genişliğindedir).

Yani, divsher ikisi de% 50 genişliğe sahip olan whitespaceikinizin artı (~ 4px) genişliği% 100'den fazladır ve bu yüzden kırılır. Sorununuza örnek:

Kod parçacığını göster

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>

Snippet'i genişlet

Bunu düzeltmenin birkaç yolu var:

1. Bu öğeler arasında boşluk yok

Kod parçacığını göster

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>

Snippet'i genişlet

2. HTML yorumlarını kullanma

Kod parçacığını göster

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>

Snippet'i genişlet

3. anne Set font-sizeiçin 0ve sonra bazı değer ekleyerek inline-blockelemanları

Kod parçacığını göster

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>

Snippet'i genişlet

4. Aralarında negatif bir kenar boşluğu kullanmak ( tercih edilmez )

Kod parçacığını göster

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>

Snippet'i genişlet

5. Kapanma açısı düşüyor

Kod parçacığını göster

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>

Snippet'i genişlet

6. Belirli HTML kapanış etiketlerini atlama ( referans için @thirtydot'a teşekkürler )

Kod parçacığını göster

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>

Snippet'i genişlet

Referanslar:

As MarcosPérezGude @ söyledi , iyi yolu kullanmaktır remve bazı varsayılan değer katmak font-sizeüzerine html(olduğu gibi etiketi HTML5Boilerplate ). Misal:

html{
    font-size: 1em;
}

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

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

Güncelleme : neredeyse 2018 olduğu için flexbox veya daha iyisi - CSS ızgara düzenini kullanın .

Question 3

css3'teki iyi cevap:

white-space: nowrap;

üst düğümde ve:

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

div (veya başka) olarak% 50'de

örnek: http://jsfiddle.net/YpTMh/19/

DÜZENLE:

bunun başka bir yolu var:

font-size: 0;

üst düğüm için ve onu alt düğümde geçersiz kılın

Question 4

Bunun nedeni, iki div'iniz arasındaki boşluk bir boşluk olarak yorumlanıyor. <div>Etiketlerinizi aşağıda gösterildiği gibi sıraya koyarsanız sorun giderilir :

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

Question 5

Çünkü elemanlar arasında boşluk var. Tüm boşlukları kaldırırsanız , sığacaklardır .

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

Question 6

Satır içi blok yerine onları engelleyin. Bu, div'leri aralarındaki boşlukları göz ardı ederek oluşturacaktır.

display:block;

veya etiketler arasındaki boşluğu kaldırın

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

veya ekle

margin: -1en;

işlenen tek alan tarafından kaplanan alanı azaltmak için div'lerden birine.

Question 7

Lütfen aşağıdaki kodu kontrol edin:

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>

Snippet'i genişlet

Question 8

Flexbox örneği - bu, iki öğeyi yan yana tutan ana sınıf için kullanılır.

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

Alındığı Dikey başka div içinde bir div ortalama

Question 9

Satır içi öğeleri tutan div'e css display: inline eklenerek yapılabilir.

Negatif değerli marj kullanarak beyaz boşluğu kaldırırken, onu bu belirli öğeye eklemek gerekli hale gelir. Bir sınıfa eklemek, bu sınıfın kullanıldığı yerleri etkileyecektir.

Bu nedenle display: inline'ı kullanmak daha güvenli olacaktır;

Question 10

float ekle : sol; her iki div etiketine.

div {
  float: left;
}

Snippet'i genişlet