CSS div float trái và phải nowrap

Một nền nhỏ: Tôi đang làm việc trên một tiêu đề mở rộng toàn bộ với trên đầu trang web của tôi. Tôi muốn tên người dùng hiện tại, nút đăng xuất, v.v. được thả nổi ở bên phải trong tiêu đề và tôi muốn biểu tượng và một số navitems ở bên trái. Khi cửa sổ trình duyệt co lại sao cho các mục bên trái và các mục bên phải va chạm, tôi KHÔNG muốn chúng quấn lại. Tôi có div bộ chứa tiêu đề được đặt thành tràn: tự động, vì vậy tôi muốn nó bắt đầu cuộn.CSS div float trái và phải nowrap

Câu hỏi: Ngay cả khi tôi có một div float: left và div float: right cả với display: inline-block, và parent với white-space: no wrap - the wrap !!! Tình cờ tôi đã tìm ra tôi có thể làm cho nó hoạt động bằng cách kèm theo một div khác cũng có hiển thị: inline-block. Tại sao điều này ???

Dưới đây là mã của tôi và một jsfiddle đang hoạt động để hiển thị cả thiết lập làm việc và thiết lập kết thúc tốt đẹp. Tôi không hiểu tại sao tôi cần thêm div. http://jsfiddle.net/klyngbaek/tNHLL/9/

Khi tôi thu nhỏ cửa sổ, tôi không muốn hình chữ nhật màu xanh thứ hai giảm xuống một dòng mới

HTML:

<h2>With extra inline-block dive. The blue rectangles do not wrap.</h2> 
<div class="wrapper nowrap"> 
    <div class="second-wrapper"> 
     <div class="floating float-left">[logo] | home | [navitem1] | [navitem2]</div> 
     <div class="floating float-right">[username] | logout</div> 
    </div> 
</div> 
<h2>Without extra inline-block dive. The blue rectangles do wrap.</h2> 
<div class="wrapper nowrap"> 
    <div class="floating float-left">[logo] | home | [navitem1] | [navitem2]</div> 
    <div class="floating float-right">[username] | logout</div> 
    <div class="clearfix"></div> 
</div>

CSS:

.wrapper { 
    border:#333; 
    margin-bottom:; 
} 
.second-wrapper { 
    border:; 
    display:inline-block; 
    min-width: 100%; 
} 
.nowrap { 
    white-space: nowrap; 
} 
.clearfix { 
    clear: both; 
} 
.floating { 
    background: lightblue; 
    border:; 
    height:; 
    padding:} 
.float-left { 
    float: left; 
} 
.float-right { 
    float: right 
}

Hoặc có lẽ có một cách tốt hơn để hoàn thành những gì tôi muốn.

Cảm ơn trước!

chỉnh sửa: cập nhật liên kết jsfiddle

Nguồn

2013-05-19 klyngbaek

Tôi nghĩ rằng bạn quên div clearfix trong fiddle và tôi nghĩ lý do tại sao wrapper thứ hai trải dài để chứa cả hai float-divs là vì thuộc tính display của nó được đặt thành inline-block. –

Ví dụ với trái, phải, trên và lề dưới bổ sung; nhiều div; điều chỉnh chiều cao của khung chính; đặt lề trái cho div nổi bên trái còn lại; và lề phải của Div đúng nổi nhất:

Kết quả:

enter image description here

Styling và HTML trong một tập tin:

<html> 
<body> 
<style> 

.row { 
    float:left; 
    border: 3px solid blue; 
    width: 96%; 
    margin-left: 2%; 
    margin-right: 2%; 
    height: 115px; 
    overflow: auto; 
    position: static; 
} 

.floatLeftDiv { 
    display: inline-block; 
    border: 3px solid red; 
    width: 200px; 
    height: 100px; 
    margin-top: 3px; 
} 

.right { 
    float: right; 
    border: 3px solid red; 
    width: 200px; 
    height: 100px; 
    margin-top: 3px; 
    margin-right: 1%; 
} 

</style> 

<div class="row"> 
    <div class="floatLeftDiv" style="margin-left: 1%;">Inline Item A:</div> 
    <div class="floatLeftDiv">Inline Item B:</div> 
    <div class="floatLeftDiv">Inline Item C:</div> 
    <div class="right">Inline Item D:</div> 
</div> 


</body> 
</html>

Mã sửa đổi từ cuộc thảo luận này và một số khác.

Nguồn

2014-02-02 05:49:28

hiển thị: hiệu ứng chặn nội dòng con của bộ chọn. Đây là phiên bản cập nhật, nơi đã xóa nội dòng chặn khỏi các phần tử con.

http://jsfiddle.net/ccsuP/

tôi sẽ phải xem các đánh dấu của các trang web mà bạn đang cố gắng để bố trí. Tôi tự hỏi nếu sử dụng định vị có thể là cách để đi.

đây kiểm tra này và cho tôi biết nếu nó giúp: http://jsfiddle.net/taUgM/

* { Box-sizing: Border-box } 

.wrapper { 
    border: 1px dashed #333; 
    margin-bottom: 10px; 
    overflow: auto; 
width: 100%; 
    position:absolute; 
} 
.box{ 
    width:50px; 
    height:50px; 
    border:1px solid yellow; 
    display:block; 
    position: relative; 
} 

.title-etc{ 
    top:0; 
    left:0 
    float:left;   
    background:blue; 
} 
.login-box{ 
    top:0; 
    right:0; 
    float:right; 
     background:red; 
}

Nguồn

2013-05-19 19:37:00 BingeBoy

Cảm ơn nhận xét. Có lẽ tôi không siêu rõ ràng với câu hỏi của tôi.Tôi không quan tâm đến nội dung của các hình chữ nhật màu xanh bao quanh. Tôi quan tâm đến 2 hình chữ nhật màu xanh bao quanh khi cửa sổ trình duyệt quá nhỏ. Ví dụ được thêm vào của bạn trong jsfiddle có hình chữ nhật thứ hai thả xuống một dòng mới, khi cửa sổ quá nhỏ. Đó là những gì tôi đang cố gắng tránh. Cảm ơn! – klyngbaek

Kiểm tra liên kết thứ hai của tôi cho thấy một giải pháp: http://jsfiddle.net/taUgM/ – BingeBoy

Cảm ơn. Có vẻ như bạn đang thiếu dấu chấm phẩy ở đây 'left: 0 float: left;' trong tiêu đề lớp-v.v. Nếu tôi thêm dấu chấm phẩy, nó sẽ bắt đầu quấn lại. Tuy nhiên, nếu tôi lấy đi phao: để nó có vẻ hoạt động! http://jsfiddle.net/kristianlyngbaek/taUgM/1/ – klyngbaek

CSS div float trái và phải nowrap

Trả lời

Các vấn đề liên quan