จัดแนว <div> องค์ประกอบเคียงข้างกัน


127

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

ใส่คำอธิบายภาพที่นี่

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

นี่คือ HTML

<div id="dB"}>
    <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> 
</div>
<div id="gB">
    <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a>     
</div>

นี่คือ CSS

#buyButton {
    background: url("assets/buy.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:232px;
     text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}

#galleryButton {
    background: url("images/galleryButton.png") 0 0 no-repeat;
    display:block;
    height:80px;
    width:230px;
     text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}

5
สิ่งแรกที่ควรนึกถึงเมื่ออ่านชื่อเรื่องคือfloat:left;
JCOC611

2
@ JCOC611: การสมัครfloat:left;ทั้งสองอย่างdivทำได้อย่างสมบูรณ์แบบ คุณสามารถโพสต์ความคิดเห็นของคุณเป็นคำตอบได้หรือไม่? ขอบคุณ!
sudo rm -rf

1
และอย่างที่สองคือdisplay: inline-block;แต่ได้รับการสนับสนุนน้อยกว่า ...
JV

1
ลอย: ทิ้งไว้ในคอนเทนเนอร์จะใช้งานได้ แต่ฉันจะลองใช้แท็ก <span> สองแท็กแทน <div> สำหรับปุ่ม
shiftycow

ดังที่ได้กล่าวไปแล้วการเพิ่ม float: left; ไปที่ #buyButton และ #galleryButton จากนั้นเพิ่มองค์ประกอบอื่นด้วย clear: both; เพื่อล้างลอย เหตุใดจึงต้องใช้ div (องค์ประกอบบล็อก) เพื่อรวม <a>
ludesign

คำตอบ:


154

นำfloat:left;ไปใช้กับ div ทั้งสองของคุณควรทำให้พวกเขายืนเคียงข้างกัน


ฉันเข้าใจผิดหรือว่าclear:both;ต้องไปที่นั่นที่ไหนสักแห่ง? ฉันไม่เคยเป็น CSS ที่ถูกต้อง แต่ดูเหมือนปกติเมื่อฉันเห็นลอยเพื่อดูเคลียร์เช่นกัน
Brad Christie

4
clear:bothจะทำตรงกันข้าม "องค์ประกอบหลังองค์ประกอบลอยจะไหลไปรอบ ๆ เพื่อหลีกเลี่ยงปัญหานี้ให้ใช้คุณสมบัติที่ชัดเจน"
JCOC611

@ JCOC611: อ่าปกติแล้วชัดเจนจะเกิดขึ้นเมื่อคุณต้องการความสามารถในการลอยตัวชั่วขณะ? มีเหตุผล. ขอบคุณสำหรับบทเรียน ;-)
Brad Christie

7
เพื่อให้ "ชัดเจน" (แย่มากฉันรู้) คุณจะต้องใช้<br style="clear: both;" />ถ้าคุณมี div ตัวที่สามซึ่งคุณต้องการอยู่ข้างใต้ทั้งสองซึ่งอยู่ในแนวเดียวกัน
Tass

3
@Tass คุณต้องมี div ที่สามของคุณเท่านั้น: <div style="clear: both;">...</div>(no br required)
intrepidis

138

ระวังfloat: left…🤔

…มีหลายวิธีในการจัดวางองค์ประกอบแบบเคียงข้างกัน

ด้านล่างนี้เป็นวิธีที่ใช้กันทั่วไปในการบรรลุสององค์ประกอบเคียงข้างกัน ...

Demo: ดู / แก้ไขตัวอย่างด้านล่างทั้งหมดบน Codepen


รูปแบบพื้นฐานสำหรับตัวอย่างทั้งหมดด้านล่าง ...

รูปแบบ css พื้นฐานสำหรับparentและchildองค์ประกอบในตัวอย่างเหล่านี้:

.parent {
  background: mediumpurple;
  padding: 1rem;
}
.child {
  border: 1px solid indigo;
  padding: 1rem;
}

ลอย: ซ้าย

การใช้floatโซลูชันของฉันส่งผลกระทบต่อองค์ประกอบอื่นโดยไม่ได้ตั้งใจ (คำแนะนำ: คุณอาจต้องใช้clearfix )

HTML

<div class='parent'>
  <div class='child float-left-child'>A</div>
  <div class='child float-left-child'>B</div>
</div>

CSS

.float-left-child {
  float: left;
}

จอแสดงผล: อินไลน์บล็อก

HTML

<div class='parent'>
  <div class='child inline-block-child'>A</div>
  <div class='child inline-block-child'>B</div>
</div>

CSS

.inline-block-child {
  display: inline-block;
}

หมายเหตุ : ช่องว่างระหว่างองค์ประกอบลูกทั้งสองนี้สามารถลบออกได้โดยการลบช่องว่างระหว่างแท็ก div:

display: inline-block (ไม่มีช่องว่าง)

HTML

<div class='parent'>
  <div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>

CSS

.inline-block-child {
  display: inline-block;
}

จอแสดงผล: เฟล็กซ์

HTML

<div class='parent flex-parent'>
  <div class='child flex-child'>A</div>
  <div class='child flex-child'>B</div>
</div>

CSS

.flex-parent {
  display: flex;
}
.flex-child {
  flex: 1;
}

จอแสดงผล: อินไลน์ดิ้น

HTML

<div class='parent inline-flex-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

CSS

.inline-flex-parent {
  display: inline-flex;
}

จอแสดงผล: ตาราง

HTML

<div class='parent grid-parent'>
  <div class='child'>A</div>
  <div class='child'>B</div>
</div>

CSS

.grid-parent {
  display: grid;
  grid-template-columns: 1fr 1fr
}


2
ใช่ แต่ฉันได้ยินมาว่าการใช้inline-blockมีปัญหาความเข้ากันได้ นอกจากนี้ยังมีข้อได้เปรียบในการใช้มากกว่านี้floatหรือไม่?
sudo rm -rf

1
ใช่inline-blockเป็นรุ่นใหม่กว่าดังนั้นเบราว์เซอร์ targe ของคุณอาจยังไม่รองรับ (แม้ว่าจะมีคุณสมบัติเฉพาะของเบราว์เซอร์มากมายและวิธีแก้ปัญหาสำหรับสิ่งนี้) ข้อดีคือองค์ประกอบที่มีจะห่อองค์ประกอบ กับfloatที่คุณจะต้องเพิ่ม CSS เพื่อองค์ประกอบหลัก
Beau Smith

12

ง่าย ๆ เข้าไว้

<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.