Làm cách nào để giữ CSS nổi trong một dòng?

Tôi muốn có hai mục trên cùng một dòng sử dụng float: leftcho mục bên trái.

Tôi không có vấn đề đạt được điều này một mình. Vấn đề là, tôi muốn hai mục để nghỉ trên cùng một dòng ngay cả khi bạn thay đổi kích thước trình duyệt rất nhỏ . Bạn biết ... như thế nào với bảng.

Mục tiêu là để giữ cho các mục bên phải khỏi gói bất kể điều gì .

Làm thế nào để tôi nói với trình duyệt bằng CSS rằng tôi thà kéo dài phần chứadiv hơn là bọc nó để float: right;div nằm bên dưới float: left; div?

những gì tôi muốn:

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

Gói <div>s nổi của bạn trong một thùng chứa <div>sử dụng hack chiều rộng tối thiểu trên trình duyệt này:

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

Bạn cũng có thể cần phải đặt "tràn" nhưng có thể không.

Điều này hoạt động vì:

• Các !importanttuyên bố, kết hợp với min-widthnguyên nhân tất cả mọi thứ để ở trên cùng một dòng trong IE7 +
• IE6 không triển khai min-width, nhưng nó có một lỗi như vậy width: 100pxsẽ ghi đè !importantkhai báo, khiến chiều rộng vùng chứa là 100px.

Một tùy chọn khác là, thay vì nổi, để đặt thuộc tính khoảng trắng ngay bây giờ thành div cha:

.parent {
     white-space: nowrap;
}

và đặt lại khoảng trắng và sử dụng màn hình khối nội tuyến để các div nằm trên cùng một dòng nhưng bạn vẫn có thể cho nó một chiều rộng.

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

Đây là một JSFiddle: https://jsfiddle.net/9g8ud31o/

Bọc phao của bạn trong div với chiều rộng tối thiểu lớn hơn chiều rộng kết hợp + lề của phao.

Không có hack hoặc bảng HTML cần thiết.

Giải pháp 1:

display: cell-cell (không được hỗ trợ rộng rãi)

Giải pháp 2:

những cái bàn

(Tôi ghét hack.)

Một lựa chọn khác: Không nổi cột bên phải của bạn; chỉ cần cho nó một lề trái để di chuyển nó vượt ra ngoài float. Bạn sẽ cần một hoặc hai hack để sửa IE6, nhưng đó là ý tưởng cơ bản.

Bạn có chắc chắn rằng các yếu tố cấp khối nổi là giải pháp tốt nhất cho vấn đề này?

Thông thường với những khó khăn về CSS trong trải nghiệm của tôi, hóa ra lý do tôi không thể thấy cách làm điều tôi muốn là tôi đã bị cuốn vào một tầm nhìn đường hầm liên quan đến đánh dấu của tôi (nghĩ rằng "làm thế nào tôi có thể thực hiện những điều này các yếu tố làm điều này ? ") thay vì quay lại và xem chính xác những gì tôi cần phải đạt được và có thể làm lại html của mình một chút để tạo điều kiện cho điều đó.

Tôi khuyên bạn nên sử dụng bảng cho vấn đề này. Tôi đang có một vấn đề tương tự và miễn là bảng chỉ được sử dụng để hiển thị một số dữ liệu và không phải cho bố cục trang chính thì nó vẫn ổn.

Thêm dòng này vào bộ chọn phần tử nổi của bạn

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

Nó sẽ ngăn chặn phần đệm và đường viền được thêm vào chiều rộng, do đó phần tử luôn ở trong hàng, ngay cả khi bạn có ví dụ. ba yếu tố với chiều rộng 33.33333%

Khi người dùng giảm kích thước cửa sổ theo chiều ngang và điều này khiến cho các float nổi theo chiều dọc, hãy xóa các float và trên div thứ hai (đó là float), sử dụng lề-top: -123px (giá trị của bạn) và lề trái: 444px (giá trị của bạn) để định vị các div khi chúng xuất hiện với phao. Khi thực hiện theo cách này, khi cửa sổ thu hẹp, div bên phải giữ nguyên vị trí và biến mất khi trang quá hẹp để bao gồm nó. ... Mà (với tôi) tốt hơn là có div bên phải "nhảy" xuống bên dưới div bên trái khi cửa sổ trình duyệt bị thu hẹp bởi người dùng.

Cách tôi khắc phục điều này là sử dụng một số jQuery. Lý do tôi làm theo cách này là vì A và B có độ rộng phần trăm.

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());
});