ฉันสามารถบรรลุเค้าโครงนี้โดยใช้ CSS floats ได้หรือไม่

เช่นเดียวกับนักพัฒนาส่วนหน้าหลายๆ คนที่ฉันเคยพบในอาชีพของฉัน ฉันเข้าใจ HTML, CSS และ JavaScript ในระดับที่เชี่ยวชาญ แต่จุดเล็กๆ น้อยๆ ของ CSS float ยังคงเป็นจุดอ่อนของฉัน

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

นี่คือการจำลองแบบง่ายของเค้าโครงที่ต้องการ:

การจำลองแบบเรียบง่าย

ฉันตั้งค่าตัวอย่าง JSBin ให้เป็นจุดเริ่มต้นที่ดี:

http://jsbin.com/UPUzUWU/1/edit?html,css,output

ฉันใช้เวลาประมาณ 20 นาทีในการเล่นว่ากล่องไหนลอยอยู่ วิธีลอย กล่องไหนเคลียร์ วิธีเคลียร์ และแม้แต่การเรียงลำดับของ HTML ฉันเข้าใกล้แล้ว แต่ไม่มีซิการ์

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

ขอบคุณ!

แก้ไข:

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

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


html css css-float
person Bungle    schedule 25.01.2014    source แหล่งที่มา
comment
html สามารถเปลี่ยนได้ไหม? ตัวอย่างเช่น: กล่อง 1 และกล่อง 2 ห่อด้วย div ?   -  person Ani    schedule 26.01.2014
comment
หากคุณสามารถเปลี่ยน HTML เพื่อเพิ่มคอนเทนเนอร์ได้: jsbin.com/UPUzUWU/6/edit   -  person Zach Saucier    schedule 26.01.2014
comment
ฉันสมมติว่า div ทั้งหมดต้องอยู่ในองค์ประกอบหลักเดียวใช่ไหม หากไม่มีวิธีแก้ไขวิธีใดวิธีหนึ่งคือสร้าง 3 คอลัมน์โดยมี 2 divs ซ้อนกันในคอลัมน์ซ้ายและขวาแล้วจะมี div เดียวอยู่ตรงกลาง   -  person jd182    schedule 26.01.2014
comment
jsbin.com/UPUzUWU/9/edit (เพียงโฟลตเดียว ไม่มีการเปลี่ยนแปลงโครงสร้าง html แต่ ... อัตรากำไรติดลบ :))   -  person sinisake    schedule 26.01.2014
comment
ขอบคุณทุกคน ใช่ ฉันควรจะบอกว่าฉันไม่ต้องการเปลี่ยนโครงสร้างของ HTML โดยการเพิ่มองค์ประกอบหลัก จะอัปเดตคำถามตอนนี้   -  person Bungle    schedule 26.01.2014
comment
@ jd182: ขอบคุณ! นั่นเป็นสิ่งที่ใกล้เคียงที่สุดเท่าที่ฉันเคยเห็นมากับสิ่งที่ฉันพยายามทำให้สำเร็จ ยังเป็นการดีที่จะพิจารณาว่าหากไม่มีการใช้ระยะขอบติดลบหรือไม่   -  person Bungle    schedule 26.01.2014
comment
เราสามารถเปลี่ยนลำดับของ div ได้หรือไม่?   -  person Ani    schedule 26.01.2014
comment
@Ani: ใช่แล้ว ไม่เป็นไร การสั่งซื้อไม่ได้มีความสำคัญมากนัก เพียงเพิ่มคอนเทนเนอร์ HTML ใหม่ที่ดูเหมือนไม่มีความหมายสำหรับฉัน   -  person Bungle    schedule 26.01.2014
comment
สวัสดี ฉันสามารถใช้ทรัพย์สินที่ชัดเจนได้หรือไม่?   -  person amaro    schedule 28.01.2014
comment
@amaro: แน่นอน! เพื่อความชัดเจน ฉันไม่ได้พยายามทำให้นี่เป็นแบบฝึกหัดที่มีข้อ จำกัด เทียม - ฉันแค่พยายามดูว่าเป็นไปได้หรือไม่ที่จะสร้างเลย์เอาต์ประเภทนี้โดยใช้ลอยแทนการวางตำแหน่งที่แน่นอน ซึ่งเป็นสิ่งที่ฉันทำตามปกติ ในระหว่างนี้ ฉันหวังว่าจะเข้าใจความแตกต่างของการลอยตัวดีขึ้น   -  person Bungle    schedule 29.01.2014

คำตอบ (3)


arrow_upward
3
arrow_downward

ที่นี่: http://jsbin.com/UPUzUWU/11/edit

 <div class="box-holder">
    <div class="vertdiv">
     <div class="box box-1 box-square">1</div>
     <div class="box box-2 box-square">2</div>
    </div>
    <div class="box box-3 box-tall">3</div>
    <div class="vertdiv">
      <div class="box box-4 box-square">4</div>
      <div class="box box-5 box-square">5</div>
    </div>
 </div>

ซีเอสเอส

.vertdiv{
   float:left;
 }

 .box-tall {
   float: left;
   height: 200px;
 }

การใช้เปอร์เซ็นต์: http://jsbin.com/UPUzUWU/13/edit ก>

ซีเอสเอส

.box-square {
   width:100%;
   height: 50%;
 }

 .box-tall {
    float:left;
    height: 100%;
    width:34%;
 }

 .vertdiv{
   float:left;
   width:33%;
   height:100%;
 }
person Ani    schedule 25.01.2014
comment
เยี่ยมมาก! คุณทำมันด้วย % แทนพิกเซลได้ไหม - person Francisco Corrales Morales; 26.01.2014
comment
ใช่...ฉันสามารถ...เดี๋ยวก่อน - person Ani; 26.01.2014
comment
@Ani: ขอบคุณมากสำหรับคำตอบของคุณ! โปรดดูการแก้ไขของฉันด้านบน - ต้องการหลีกเลี่ยงการใช้องค์ประกอบหลักเพิ่มเติม - person Bungle; 26.01.2014
comment
คนอย่างคุณทำให้ StackOverflow คุ้มค่า! - person Francisco Corrales Morales; 26.01.2014

arrow_upward
1
arrow_downward

นี่คือความสูง & ความกว้างแบบเต็มและโซลูชันที่ตอบสนองอย่างเต็มที่: http://jsbin.com/upAFigEp/2/edit

person Sergei Beregov    schedule 25.01.2014
comment
ขอบคุณสำหรับคำตอบของคุณ Sergei! โปรดดูคำชี้แจงของฉันสำหรับคำถาม - ฉันต้องการหลีกเลี่ยงการใช้องค์ประกอบหลักที่ไม่ใช่ความหมาย รูปแบบที่ลื่นไหล/ตอบสนองได้ดีแต่ไม่ใช่ข้อกำหนด - person Bungle; 26.01.2014

arrow_upward
0
arrow_downward

ดู JsFiddle นี้

    .box-holder {
  width: 300px;
  height: 200px;
  background-color: #fff;
  position: absolute;
}

.box {
  width: 100px;
  float: left;
}

.box-square {
  height: 100px;
}

.box-tall {
  height: 200px;
}

.box-1 {
  background-color: #eee;
  float:left;
}

.box-2 {
  background-color: #ddd;
    float:left;
    position: absolute;
    top: 100px;
}

.box-3 {
  background-color: #ccc;
}

.box-4 {
  background-color: #bbb;
}

.box-5 {
  background-color: #aaa;
}
person Siva    schedule 26.01.2014
comment
ขอบคุณ Siva แต่สิ่งนี้ยังคงต้องอาศัยตำแหน่งที่แน่นอนสำหรับ .box-2 มีวิธีหลีกเลี่ยงสิ่งนั้นหรือไม่? - person Bungle; 26.01.2014