ทำไมองค์ประกอบแบบอินไลน์บล็อกถูกผลักลง

ต่อไปนี้เป็นรหัสของฉันและฉันต้องการที่จะเข้าใจว่าทำไม #firstDiv ถูกผลักลงเบราว์เซอร์ทั้งหมด ฉันต้องการที่จะเข้าใจการทำงานภายในของความจริงที่ว่าทำไมมันถูกผลักลงมามากกว่าที่จะดึงมันขึ้นมาโดยวิธีใดวิธีหนึ่ง (และฉันรู้วิธีจัดอันดับเสื้อของพวกเขา :))

และฉันรู้ว่ามันล้น: ซ่อนซึ่งก่อให้เกิด แต่ไม่แน่ใจว่าทำไมมันผลักดัน div ที่ลง

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}

<div id="container">
  <div id="firstDiv">FIRST</div>
  <div id="secondDiv">SECOND</div>
  <div id="thirdDiv">THIRD
    <br>some more content<br> some more content
  </div>
</div>

http://jsfiddle.net/WGCyu/

โดยทั่วไปคุณได้เพิ่มความยุ่งเหยิงในรหัสของคุณซึ่งสร้างความสับสนมากขึ้นดังนั้นก่อนอื่นฉันพยายามลบความยุ่งเหยิงที่เป็นอุปสรรคต่อการเข้าใจปัญหาที่แท้จริง

ก่อนอื่นเราต้องพิสูจน์ว่าอะไรคือคำถามจริง นั่นเป็นสาเหตุที่inline-blockองค์ประกอบ "" ถูกผลักลง

ตอนนี้เราเริ่มที่จะเข้าใจและลบความยุ่งเหยิงก่อน

1 - ทำไมไม่ให้ทั้งสาม divs ความกว้างเส้นขอบเดียวกัน มาแจกกันเถอะ

2 -องค์ประกอบลอยมีการเชื่อมต่อใด ๆ กับองค์ประกอบในบล็อกถูกผลักลง ไม่ไม่มีอะไรเกี่ยวข้องกับมัน

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

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

พื้นฐานของ 'บล็อกแบบอินไลน์' เป็นพื้นฐานของกล่องบรรทัดสุดท้ายในโฟลว์ปกติเว้นแต่ว่าจะไม่มีกล่องอินไลน์โฟลว์หรือหากคุณสมบัติ 'โอเวอร์โฟลว์' มีค่าที่คำนวณได้นอกเหนือจาก 'มองเห็น' ใน ซึ่งกรณีพื้นฐานคือขอบด้านล่าง

หากคุณไม่แน่ใจเกี่ยวกับพื้นฐานแล้วนี่คือคำอธิบายสั้น ๆ ในคำง่าย ๆ

อักขระทั้งหมดยกเว้น 'gjpqy' จะถูกเขียนบน baseline คุณสามารถคิดถึง baseline ราวกับว่าคุณวาดเส้นแนวนอนที่เรียบง่ายเหมือนกับการขีดเส้นใต้ด้านล่าง "ตัวอักษรแบบสุ่ม" จากนั้นมันจะเป็น baseline แต่ตอนนี้ถ้าคุณเขียน 'gjpqy' อักขระในบรรทัดเดียวกันส่วนล่างของอักขระเหล่านี้จะต่ำกว่าบรรทัด

ดังนั้นเราสามารถพูดได้ว่าตัวละครทุกตัวยกเว้น 'gjpqy' จะถูกเขียนอย่างสมบูรณ์เหนือเส้นฐานในขณะที่บางส่วนของตัวละครเหล่านี้จะถูกเขียนใต้เส้นฐาน

3 -ทำไมไม่ตรวจสอบพื้นฐานของสายของเราอยู่ที่ไหน ฉันได้เพิ่มตัวละครไม่กี่ตัวที่แสดงพื้นฐานของเส้นของเรา

4 -ทำไมไม่เพิ่มอักขระบางตัวใน div ของเราด้วยเพื่อหาเส้นเขตแดนใน div ในที่นี้มีการเพิ่มตัวอักขระบางตัวใน divs เพื่อทำให้พื้นฐานชัดเจนขึ้น

ตอนนี้เมื่อคุณเข้าใจเกี่ยวกับพื้นฐานอ่านฉบับย่อที่เรียบง่ายต่อไปนี้เกี่ยวกับพื้นฐานของบล็อกอินไลน์

i) หากคำถามแบบอินไลน์บล็อกมีคุณสมบัติโอเวอร์โฟลว์ตั้งค่าให้มองเห็นได้ (ซึ่งเป็นค่าเริ่มต้นดังนั้นจึงไม่จำเป็นต้องตั้งค่า) จากนั้นพื้นฐานของมันจะเป็นพื้นฐานของบล็อกที่มีของบรรทัด

ii) หากมีการบล็อกแบบอินไลน์ให้ตั้งค่าคุณสมบัติโอเวอร์โฟลว์เป็น OTHER กว่าที่มองเห็น จากนั้นขอบล่างของมันจะอยู่ที่เส้นฐานของกล่องบรรจุ

• จุดแรกในรายละเอียด

ตอนนี้ดูที่นี้อีกครั้งเพื่อชี้แจงแนวความคิดของคุณว่าสิ่งที่เกิดขึ้นกับ div หากยังมีความสับสนเกิดขึ้นที่นี่จะมีการเพิ่มตัวละครมากขึ้นใกล้กับ div สีเขียวเพื่อสร้างพื้นฐานของบล็อกที่มีและพื้นฐาน div div สีเขียวอยู่ในแนวเดียวกัน

ตอนนี้ฉันอ้างว่าพวกเขามีพื้นฐานเดียวกันหรือไม่ ขวา?

5 -แล้วทำไมไม่ทับซ้อนกันและดูว่ามันเหมาะสมกันหรือไม่ ดังนั้นฉันจะนำ div ที่สามซ้าย: 35px; เพื่อตรวจสอบว่าพวกเขามีพื้นฐานเดียวกันตอนนี้หรือไม่

ตอนนี้เราได้รับการพิสูจน์จุดแรกแล้ว

• รายละเอียดจุดที่สอง

หลังจากคำอธิบายของจุดแรกจุดที่สองสามารถย่อยได้ง่ายและคุณเห็นว่า div แรกซึ่งมีคุณสมบัติโอเวอร์โฟลที่ตั้งค่าเป็นอื่นที่มองเห็นได้ (ซ่อนอยู่) มีระยะขอบด้านล่างบนบรรทัดฐานของบรรทัด

ตอนนี้คุณสามารถทำการทดลองสองสามครั้งเพื่ออธิบายเพิ่มเติม

1. ตั้งครั้งแรก div ล้น: มองเห็น (หรือลบมันทั้งหมด)
2. ชุดที่สองล้น div: อื่น ๆ นอกเหนือจากที่มองเห็นได้
3. ตั้งทั้ง divs ล้น: อื่น ๆ นอกเหนือจากที่มองเห็นได้

ทีนี้ก็นำความยุ่งเหยิงของคุณกลับมาและดูว่าทุกอย่างดูดีหรือไม่

1. นำdiv ที่ลอยของคุณกลับมา (แน่นอนว่าไม่จำเป็นต้อง
   เพิ่มความกว้างของร่างกาย) คุณเห็นว่ามันไม่มีผลกระทบ
2. นำกลับมาอัตรากำไรขั้นต้นที่แปลกเหมือนกัน
3. ตั้งdiv สีเขียวเป็นโอเวอร์โฟลว์: มองเห็นได้ตามที่คุณตั้งไว้ในคำถามของคุณ (การเยื้องศูนย์นั้นเกิดจากการเพิ่มความกว้างของขอบจาก 1px เป็น 5px ดังนั้นหากปรับค่าลบทิ้งคุณจะเห็นว่าไม่มีปัญหา)
4. ตอนนี้ลบอักขระเพิ่มเติมฉันจะเพิ่มความช่วยเหลือในการทำความเข้าใจ (และแน่นอนลบการลบด้านซ้าย)
5. ในที่สุดก็ลดความกว้างของร่างกายเพราะเราไม่จำเป็นต้องกว้างอีกต่อไป

และตอนนี้เรากลับไปที่จุดเริ่มต้น

หวังว่าฉันได้ตอบคำถามของคุณแล้ว

ค่าเริ่มต้นสำหรับvertical-alignใน CSS คือbaseline& กฎนี้ใช้กับinline-blockอ่านhttp://www.brunildo.org/test/inline-block.htmlนี้

เขียนvertical-align:topในinline-blockDIV ของคุณ

ตรวจสอบhttp://jsfiddle.net/WGCyu/1/นี้

เพียงแค่ใช้ vertical-align:top;

การสาธิต

ดูนี้ตัวอย่างเช่นทางเลือก เหตุผลของพฤติกรรมดังกล่าวอธิบายไว้ในโมดูล CSS3: line: 3.2 การห่อกล่องเส้น [1] :

โดยทั่วไปแล้วขอบเริ่มต้นของกล่องเส้นจะสัมผัสกับขอบเริ่มต้นของบล็อกที่มีอยู่และขอบปลายนั้นจะสัมผัสกับปลายขอบของบล็อกที่มีอยู่ อย่างไรก็ตามกล่องลอยอาจอยู่ระหว่างขอบบล็อกที่มีและขอบกล่องเส้น ดังนั้นแม้ว่าบรรทัดกล่องในบริบทการจัดรูปแบบอินไลน์เดียวกันโดยทั่วไปมีความก้าวหน้าแบบอินไลน์แบบเดียวกัน (ของบล็อกที่มี) พวกเขาอาจแตกต่างกันถ้าพื้นที่อินไลน์ - ความก้าวหน้าที่มีอยู่ลดลงเนื่องจากการลอย [... ]

อย่างที่คุณเห็นองค์ประกอบที่สามจะถูกผลักลงแม้ว่ามันจะไม่มีoverflowคุณสมบัติ เหตุผลต้องอยู่ที่อื่นเพื่อค้นหา ลักษณะการทำงานที่สองที่คุณสังเกตเห็นได้อธิบายไว้ในข้อมูลจำเพาะของสไตล์ชีตระดับ 2 การแก้ไข 1 (CSS 2.1): 9.5 Floats [2] :

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

display:inline-block;div ทั้งหมดของคุณกำลังใช้ชนิดพิเศษbaselineในกรณีนี้10.8 การคำนวณความสูงของบรรทัด: คุณสมบัติ 'ความสูงของบรรทัด' และ 'จัดแนวตั้ง' (สุดขั้ว) [3] :

พื้นฐานของ 'บล็อกแบบอินไลน์' เป็นพื้นฐานของกล่องบรรทัดสุดท้ายในโฟลว์ปกติเว้นแต่ว่าจะไม่มีกล่องอินไลน์โฟลว์หรือหากคุณสมบัติ 'โอเวอร์โฟลว์' มีค่าที่คำนวณได้นอกเหนือจาก 'มองเห็น' ใน ซึ่งกรณีพื้นฐานคือขอบด้านล่าง

ดังนั้นเมื่อคุณกำลังใช้องค์ประกอบลอยและinline-blockองค์ประกอบองค์ประกอบลอยจะถูกผลักไปด้านข้างและแบบอินไลน์การจัดรูปแบบจะถูกคำนวณใหม่ตาม1 ในทางตรงกันข้ามองค์ประกอบต่อไปจะสั้นลงถ้าพวกเขาจะไม่พอดี เมื่อคุณกำลังทำงานอยู่ด้วยจำนวนเงินขั้นต่ำของพื้นที่ไม่มีทางอื่นที่จะปรับเปลี่ยนองค์ประกอบของคุณแล้วผลักดันพวกเขา2 ในกรณีนี้องค์ประกอบสูงสุดจะกำหนดขนาดของกลุ่มการตัดของคุณดังนั้นการกำหนดbaseline 3ขณะที่การปรับตำแหน่งและความกว้างที่ระบุใน2จะไม่สามารถใช้กับองค์ประกอบความสูงสูงสุดที่เว้นระยะได้ ในกรณีนี้พฤติกรรมเช่นเดียวกับในการสาธิตครั้งแรกของฉันจะส่งผล

สุดท้ายเหตุผลที่คุณoverflow:hiddenจะป้องกันไม่ให้#firstDivที่จะผลักดันไปที่ขอบล่างของคุณ#containerแต่ฉันไม่สามารถหาเหตุผลในมาตรา 11 โดยไม่ต้องoverflow:hiddenทำงานเป็นยกเว้นและกำหนดโดย2และ3 การสาธิต

TL; DR:ให้ดูคำแนะนำ W3 อย่างใกล้ชิดและการใช้งานในเบราว์เซอร์ ในความเห็นที่ต่ำต้อยของฉันองค์ประกอบลอยตัวมุ่งมั่นที่จะแสดงพฤติกรรมที่ไม่คาดคิดหากคุณไม่ทราบการเปลี่ยนแปลงทั้งหมดที่พวกเขาทำกับองค์ประกอบโดยรอบของคุณ นี่คือตัวอย่างอื่นที่แสดงปัญหาทั่วไปเกี่ยวกับการลอย

_{ฉันเริ่มต้นจากการตอบคำถามนี้แต่มันถูกล็อคเหมือนล่อก่อนที่ฉันจะทำเสร็จฉันจึงโพสต์คำตอบที่นี่แทน}

ก่อนอื่นเราต้องเข้าใจว่าอะไรinline-blockคืออะไร นิยามใน MDNพูดว่า:

องค์ประกอบจะสร้างกล่ององค์ประกอบบล็อกที่จะถูกไหลไปพร้อมกับเนื้อหาโดยรอบราวกับว่ามันเป็นกล่องแบบอินไลน์เดียว (จะทำงานเหมือนองค์ประกอบที่ถูกแทนที่)

เพื่อให้เข้าใจถึงสิ่งที่เกิดขึ้นที่นี่เราต้องดูที่และค่าเริ่มต้นของมันvertical-alignbaseline

ในภาพประกอบนี้คุณมีแผนภูมิสีนี้:
สีน้ำเงิน:
สีแดงพื้นฐาน: ด้านบนและด้านล่างของความสูงบรรทัด
สีเขียว: ด้านบนและด้านล่างของกล่องเนื้อหาแบบอินไลน์

ในองค์ประกอบ #left คุณมีเนื้อหาต้นฉบับเดิมที่ควบคุมสิ่งที่เป็นพื้นฐาน ซึ่งหมายความว่าข้อความภายในกำหนดพื้นฐานสำหรับ #left
ใน #right ไม่มีเนื้อหาดังนั้นเบราว์เซอร์ไม่มีตัวเลือกอื่นนอกจากใช้กล่องด้านล่างเป็นพื้นฐาน

เห็นภาพนี้ที่ฉันได้วาดพื้นฐานในตัวอย่างที่ภาชนะอินไลน์แรกมีข้อความบางส่วนและต่อไปเป็นที่ว่างเปล่า:

ถ้าคุณจัดตำแหน่งองค์ประกอบหนึ่งไปยังด้านบนโดยเฉพาะคุณพูดจริง ๆ ว่าคุณจัดตำแหน่งด้านบนขององค์ประกอบนี้ไปด้านบนของกล่องรายการ

นี่อาจเป็นตัวอย่างที่เข้าใจง่ายกว่า

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
    vertical-align: baseline;
}
div#middle {
    vertical-align: top;
    height: 50px
}
   
div#right {
    font-size: 30px;
    height: 100px
}

<div id="left">
  <span>groovy</span>
</div>
<div id="middle">groovy</div>

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

ผลลัพธ์คือ - และฉันเพิ่มเส้นฐานสีน้ำเงินและกล่องเส้นสีแดง: เกิดอะไรขึ้นที่นี่คือความสูงของกล่องเส้นขึ้นอยู่กับว่าเนื้อหาของเส้นทั้งหมดถูกวางไว้อย่างไร ซึ่งหมายความว่าในการคำนวณการจัดตำแหน่งบนสุดการจัดตำแหน่งพื้นฐานจะต้องคำนวณก่อน องค์ประกอบมีดังนั้นนี้ไม่ได้ใช้สำหรับการวางตำแหน่งพื้นฐาน แต่และอยู่ในแนวตั้งเพื่อให้เส้นเขตแดนอยู่ในแนวเดียวกัน เมื่อทำสิ่งนี้เสร็จแล้วความสูงของกล่องเส้นจะเพิ่มขึ้นเนื่องจากองค์ประกอบถูกผลักขึ้นเล็กน้อยเนื่องจากขนาดตัวอักษรที่ใหญ่ขึ้น จากนั้นสามารถคำนวณตำแหน่งสูงสุดขององค์ประกอบและนี่คือตำแหน่งด้านบนของกล่องรายการ
#middlevertical-align:top#left#right#right#middle

ปัญหาคือเนื่องจากคุณได้ใช้ float: left ใน div ที่สอง ซึ่งทำให้ div ที่สองมาทางซ้ายและ div แรกของคุณลดลงและมาหลังจาก div ที่สองของคุณ หากคุณใช้โฟลต: ทิ้งให้กับ div แรกเช่นกันปัญหาของคุณจะหายไป

ล้น: ซ่อนจะทำให้ไม่มีปัญหากับรูปแบบของคุณล้น: ซ่อนส่งผลกระทบเฉพาะองค์ประกอบภายในของ div มันไม่มีอะไรเกี่ยวข้องกับองค์ประกอบอื่น ๆ ที่อยู่นอก

ลองเพิ่มpadding:0;ลงในเนื้อความแล้วนำส่วนต่างของ div ออก

เพิ่มbackground-color:*anyสีนอกเหนือจากพื้นหลัง * เพื่อตรวจสอบความแตกต่าง

ลองทำให้คุณสมบัติ CSS ทั้งหมดขององค์ประกอบทั้งหมดเหมือนกัน

ฉันมีปัญหาที่คล้ายกันและในขณะที่แก้ไขสิ่งนี้ฉันพบว่าฉันกำลังวางองค์ประกอบที่มีคุณสมบัติแบบอักษรเป็นองค์ประกอบขององค์ประกอบ

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

ในตัวอย่างต่อไปนี้องค์ประกอบที่ลดลงของคลาส ".dldCuboidButton" กำหนดด้วยขนาดตัวอักษร: 30 px

ดังนั้นฉันจึงเพิ่มคุณสมบัติเดียวกันให้กับคลาสที่เหลืออยู่เช่น. cuboidRecycle, .liCollect, .dldCollect ซึ่งใช้โดยองค์ประกอบ DIV ด้วยวิธีนั้นองค์ประกอบ DIV ทั้งหมดจะทำตามมาตรการเดียวกันก่อนและหลังปล่อยองค์ประกอบลงไป

.cuboidRecycle {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.liCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}

.dldCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#009933;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.dldCuboidButton {
    background-color:  #7c6436;
    color: white; /* White text */
    font-size: 30px; /* Set a font-size */
    border-radius: 8px;
    margin-top: 1px;
  }

นี่คือตัวอย่างของ HTML ที่สร้างขึ้นแบบไดนามิกโดยใช้ CSS ด้านบน

$("div#tabs").append(
  "<div id='" + newTabId + "'>#" + uniqueId + 
  "<input type=hidden id=hdn_tmsource_" + uniqueId + "  value='" + divTmpfest + "'>" + 
  "<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" + 
  "<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)'  ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
  "<div id='" + divDropLeCuboid  + "' class=liCollect ondrop='dropForLinkExport(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
  "<div id='" + divDropDwldCuboid  + "' class=dldCollect ondrop='dropForTMEntry(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
  "</div>" 
);