ฉันจะเก็บ CSS ลอยในหนึ่งบรรทัดได้อย่างไร

ฉันต้องการมีสองรายการในบรรทัดเดียวกันใช้float: leftสำหรับรายการทางด้านซ้าย

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

เป้าหมายคือการป้องกันไม่ให้สินค้าถูกห่อไว้ไม่ว่าอะไรจะเกิดขึ้น

วิธีการที่ผมบอกเบราว์เซอร์ใช้ CSS ที่ผมค่อนข้างจะยืดที่มีdivกว่าห่อมันเพื่อที่float: right;div เป็นดังต่อไปนี้float: left; div?

สิ่งที่ฉันต้องการ:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

ห่อของที่ลอย<div>อยู่ในคอนเทนเนอร์<div>ที่ใช้แฮ็คความกว้างขั้นต่ำของเบราว์เซอร์:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

คุณอาจต้องตั้งค่า "ล้น" แต่อาจไม่ได้

งานนี้เพราะ:

• !importantประกาศรวมกับmin-widthสาเหตุที่ทุกอย่างจะอยู่บนบรรทัดเดียวกันใน IE7 +
• IE6 ไม่ได้ใช้งานmin-widthแต่มีข้อผิดพลาดเช่นนั้นwidth: 100pxแทนที่การ!importantประกาศทำให้ความกว้างคอนเทนเนอร์เท่ากับ 100px

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

.parent {
     white-space: nowrap;
}

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

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

นี่คือ JSFiddle: https://jsfiddle.net/9g8ud31o/

ห่อเซาะของคุณใน div ด้วยความกว้างขั้นต่ำมากกว่าความกว้างรวม + ระยะขอบของโฟลเตอร์

ไม่มีแฮ็กหรือตาราง HTML ที่จำเป็น

โซลูชันที่ 1:

จอแสดงผล: ตารางเซลล์ (ไม่รองรับอย่างกว้างขวาง)

โซลูชันที่ 2:

ตาราง

(ฉันเกลียดการแฮ็ก)

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

คุณแน่ใจหรือว่าองค์ประกอบระดับบล็อกลอยเป็นทางออกที่ดีที่สุดสำหรับปัญหานี้?

บ่อยครั้งที่ความยากของ CSS ในประสบการณ์ของฉันมันกลับกลายเป็นว่าเหตุผลที่ฉันไม่เห็นวิธีการทำสิ่งที่ฉันต้องการคือฉันได้ติดอยู่ในวิสัยทัศน์อุโมงค์เกี่ยวกับมาร์กอัปของฉัน (คิดว่า "ฉันจะทำสิ่งเหล่านี้อย่างไรองค์ประกอบทำสิ่งนี้หรือไม่ ") แทนที่จะย้อนกลับไปดูสิ่งที่ฉันต้องการเพื่อให้บรรลุและอาจจะปรับใช้ html ของฉันอีกเล็กน้อยเพื่ออำนวยความสะดวก

ฉันขอแนะนำให้ใช้ตารางสำหรับปัญหานี้ ฉันมีปัญหาที่คล้ายกันและตราบใดที่ตารางใช้เพื่อแสดงข้อมูลบางอย่างเท่านั้นไม่ใช่เค้าโครงของหน้าหลัก

เพิ่มบรรทัดนี้ไปยังตัวเลือกองค์ประกอบลอยของคุณ

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

มันจะป้องกันการขยายและขอบเพื่อเพิ่มความกว้างดังนั้นองค์ประกอบอยู่ในแถวเสมอแม้ว่าคุณจะมีเช่น สามองค์ประกอบที่มีความกว้าง 33.33333%

เมื่อผู้ใช้ลดขนาดหน้าต่างในแนวนอนและสิ่งนี้ทำให้ลอยไปกองในแนวตั้งลบลอยและใน div ที่สอง (นั่นคือลอย) ใช้ขอบบน: -123px (ค่าของคุณ) และขอบซ้าย: 444px (ค่าของคุณ) วางตำแหน่ง divs ตามที่ปรากฏพร้อมกับลอย เมื่อทำเช่นนี้เมื่อหน้าต่างแคบลง div ด้านขวาจะอยู่ในตำแหน่งและหายไปเมื่อหน้าแคบเกินไปที่จะรวมไว้ ... ที่ (ถึงฉัน) จะดีกว่าการใช้ div "กระโดด" ด้านขวาลงด้านล่าง div ด้านซ้ายเมื่อหน้าต่างเบราว์เซอร์แคบลงโดยผู้ใช้

วิธีที่ฉันได้รับสิ่งนี้คือใช้ jQuery เหตุผลที่ฉันทำแบบนี้ก็เพราะ A และ B มีความกว้างเป็นเปอร์เซ็นต์

HTML:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});