องค์ประกอบแบบอินไลน์บล็อกสองชิ้นแต่ละชิ้นกว้าง 50% ไม่พอดีเคียงข้างกันในแถวเดียว

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/

โค้ดด้านบนพยายามวาง #left div และ #right div เคียงข้างกันในแถวเดียว แต่อย่างที่คุณเห็นใน JSFiddle URL ด้านบนนี่ไม่ใช่กรณีนี้

ฉันสามารถแก้ไขปัญหาโดยลดความกว้างของ div ตัวใดตัวหนึ่งลงเหลือ 49% ดูhttp://jsfiddle.net/mUKSC/ แต่นี่ไม่ใช่ทางออกที่ดีเนื่องจากมีช่องว่างเล็ก ๆ ปรากฏขึ้นระหว่าง div ทั้งสอง

อีกวิธีหนึ่งที่ฉันสามารถแก้ปัญหาได้คือการลอยทั้ง div ดูhttp://jsfiddle.net/VptQm/ ใช้งานได้ดี

แต่คำถามเดิมของฉันยังคงอยู่ เหตุใดเมื่อ div ทั้งสองถูกเก็บไว้เป็นองค์ประกอบแบบอินไลน์บล็อกจึงไม่พอดีกัน

Question 2

เมื่อใช้inline-blockองค์ประกอบมักจะมีwhitespace ปัญหาระหว่างองค์ประกอบเหล่านั้น (ช่องว่างนั้นกว้างประมาณ ~ 4px)

ดังนั้นทั้งสองของคุณdivsซึ่งทั้งคู่มีความกว้าง 50% บวกกับwhitespace(~ 4px) มีความกว้างมากกว่า 100% ดังนั้นมันจึงแตก ตัวอย่างปัญหาของคุณ:

แสดงข้อมูลโค้ด

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>

Expand snippet

มีสองสามวิธีในการแก้ไข:

1. ไม่มีช่องว่างระหว่างองค์ประกอบเหล่านั้น

แสดงข้อมูลโค้ด

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>

Expand snippet

2. ใช้ความคิดเห็น HTML

แสดงข้อมูลโค้ด

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>

Expand snippet

3. ตั้งค่าผู้ปกครองfont-sizeเป็น0แล้วเพิ่มมูลค่าให้กับinline-blockองค์ประกอบ

แสดงข้อมูลโค้ด

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>

Expand snippet

4. ใช้ระยะขอบลบระหว่างกัน ( ไม่ควรใช้ )

แสดงข้อมูลโค้ด

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>

Expand snippet

5. ลดมุมปิด

แสดงข้อมูลโค้ด

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>

Expand snippet

6. ข้ามแท็กปิด HTML บางแท็ก (ขอบคุณ @thirtydot สำหรับการอ้างอิง )

แสดงข้อมูลโค้ด

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>

Expand snippet

อ้างอิง:

ในฐานะที่เป็น@ MarcosPérezGude กล่าวว่าการที่ดีที่สุดวิธีคือการใช้remและเพิ่มค่าเริ่มต้นบางอย่างfont-sizeในhtmlแท็ก (เหมือนในHTML5Boilerplate ) ตัวอย่าง:

html{
    font-size: 1em;
}

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

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

อัพเดท : เป็นมันเกือบ 2018 ใช้flexboxหรือดียิ่งขึ้น - รูปแบบตาราง CSS

Question 3

คำตอบที่ดีใน css3 คือ:

white-space: nowrap;

ในโหนดหลักและ:

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

ใน div (หรืออื่น ๆ ) ที่ 50%

ตัวอย่าง: http://jsfiddle.net/YpTMh/19/

แก้ไข:

มีวิธีอื่นด้วย:

font-size: 0;

สำหรับโหนดแม่และแทนที่ในโหนดลูก

Question 4

เป็นเพราะช่องว่างระหว่าง div ทั้งสองของคุณถูกตีความว่าเป็นช่องว่าง หากคุณวาง<div>แท็กของคุณในแนวเดียวกันตามที่แสดงด้านล่างปัญหาจะได้รับการแก้ไข :

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

Question 5

เนื่องจากมีช่องว่างระหว่างองค์ประกอบ. หากคุณลบช่องว่างทั้งหมดที่พวกเขาจะพอดี

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

Question 6

ทำให้บล็อกแทนการบล็อกแบบอินไลน์ สิ่งนี้จะทำให้ div โดยไม่สนใจช่องว่างระหว่างกัน

display:block;

หรือลบช่องว่างระหว่างแท็ก

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

หรือเพิ่ม

margin: -1en;

ไปยังหนึ่งใน div เพื่อลดพื้นที่ว่างที่เกิดจากการแสดงผลช่องว่างเดียว

Question 7

โปรดตรวจสอบรหัสด้านล่าง:

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>

ขยายข้อมูลโค้ด

Question 8

ตัวอย่าง Flexbox - สิ่งนี้จะใช้สำหรับคลาสพาเรนต์ที่ถือสององค์ประกอบเคียงข้างกัน

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

นำมาจากแนวตั้งโดยจัดกึ่งกลาง div ภายใน div อื่น

Question 9

สามารถทำได้โดยการเพิ่ม css display: inline ให้กับ div ที่เก็บอิลิเมนต์แบบอินไลน์

ในขณะที่ลบช่องว่างโดยใช้ระยะขอบที่มีค่าเป็นลบจำเป็นต้องเพิ่มลงในองค์ประกอบเฉพาะนี้ เนื่องจากการเพิ่มลงในคลาสจะส่งผลต่อสถานที่ที่คลาสนี้ถูกใช้

ดังนั้นจึงจะปลอดภัยกว่าถ้าใช้ display: inline;

Question 10

เพิ่มลอย: ซ้าย; ไปยังแท็ก div ทั้งสอง

div {
  float: left;
}

ขยายข้อมูลโค้ด