khối div trung tâm nhưng không phải ở hàng cuối cùng

Tôi thực sự bị mắc kẹt với việc cố gắng giữ cho các khối div được căn giữa với ngoại lệ của hàng cuối cùng.khối div trung tâm nhưng không phải ở hàng cuối cùng

Một người nào đó khác đã tạo ra fiddle này thể hiện câu hỏi của tôi. Bạn có thể xem cách các khối trong bảng kết quả được căn giữa ngay cả khi cửa sổ được thay đổi kích thước. Tôi muốn có hành vi tương tự NHƯNG nếu hàng cuối cùng chứa ít khối hơn các hàng ở trên, thì hàng cuối cùng sẽ không được căn giữa nhưng căn trái.

Đây là fiddle: http://jsfiddle.net/zbbHc/1/

Ai đó có thể hỏi tại sao tôi không chỉ cần sử dụng float: left. Vấn đề với điều đó là tôi không thể tìm cách tập trung các khối bằng cách sử dụng phương thức đó mà không cần chỉ rõ chiều rộng cố định cho trình bao bọc của tôi. Tôi đang cố giữ mọi thứ càng lỏng càng tốt.

Nguồn

2012-07-27 Sony packman

Rất thú vị, tôi tự hỏi nếu điều này có thể được thực hiện với CSS tinh khiết – Kos

Trình bao bọc của bạn rộng bao nhiêu? Có vấn đề bao nhiêu mặt hàng trên một hàng? – JohnC

Câu hỏi hay! Là một mở rộng cho câu hỏi của @JohnC, khi bạn nói không muốn áp dụng chiều rộng cố định cho wrapper của bạn, bạn có nghĩa là bạn không muốn đặt chiều rộng cố định cho hai "cột"? –

Hãy thử fiddle này http://jsfiddle.net/zbbHc/45/

Không chắc, nhưng tôi nghĩ đây là tối đa chúng tôi có thể làm bằng CSS một mình.

Cập nhật: (điều này sẽ không làm việc trong mọi trường hợp, kiểm tra mã dưới đây mà làm việc trong mọi trường hợp [Tôi đoán])

HTML

<div class="wrapper"> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB hide"></div> 
    <div class="iB hide"></div> 
</div>

CSS

.wrapper { 
    width: 100%; 
    background: red; 
    text-align: center; 
    text-align-last: left; 
} 

.iB { 
    display:inline-block; 
    width: 200px; 
    height: 100px; 
    background: green; 
} 
.iB.hide { 
    visibility:hidden; 
}

Đây là phương pháp nhanh và bẩn bằng jQuery. Điều này sẽ thêm các yếu tố vô hình tự động

Fiddle đây http://jsfiddle.net/fD6fn/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script> 
<style> 
.wrapper { 
    width: 100%; 
    background: red; 
    text-align: center; 
    text-align-last: left; 
} 

.iB { 
    display:inline-block; 
    width: 200px; 
    height: 100px; 
    background: green; 
} 
.iB.hide { 
    visibility:hidden; 
} 
 
</style> 
</head> 

<body> 
<div class="wrapper" id="wrapper"> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
    <div class="iB"></div> 
</div> 
<script language="javascript"> 
function findHiddenElementCount() { 
var $wrapper = $("#wrapper"), 
    itemWidth = "200", 
    count = "", 
    itemCount = 7; 

    count = $wrapper.width()/itemWidth; 

// Some wild logic below, can be optimized. 
return parseInt(count) - (itemCount - (parseInt(itemCount/parseInt(count)) * parseInt(count))) ; 
} 



function addInvisibleElements() 
{ 
    // Delete invisible items 
    $("#wrapper .iB.hide").remove(); 


    var c = findHiddenElementCount(); 

    for(var i = 0; i < c;i++) 
    { 
     $("#wrapper").append('<div class="iB hide"></div>'); 
    } 

} 

$(window).bind("resize",addInvisibleElements); // resize handler 

$(document).ready(addInvisibleElements); // take care during page load 

</script> 
</body> 
</html>

Nguồn

2012-07-27 15:56:31 kiranvj

Thật không may, trong Chrome dẫn đến mọi thứ được căn trái. –

Tôi nghĩ bạn nên kiểm tra lại và chơi với kích thước trình duyệt của bạn. Dường như nó hoạt động hoàn hảo đối với tôi, ngoại trừ khi tôi nhận được cửa sổ to đến mức tôi cần thêm nhiều hàng ẩn. Tùy thuộc vào những gì OP là sau, một kết hợp của điều này và Javascript, hoặc chỉ cần thêm một số lượng lớn các hàng ẩn nên hoạt động. – travis

Tôi thấy đây là một đề xuất khá thú vị, mặc dù có một số khía cạnh tiêu cực của cách tiếp cận này, mối quan tâm chính là các khối ẩn khiến cho trình bao bọc mở rộng theo chiều dọc dài hơn cần mở rộng. Một vấn đề khác (đối với tôi) là tôi không có ý tưởng làm thế nào để sử dụng javascript để xác định số lượng khối vô hình cần được chèn vào trong các tình huống khác nhau. –

Tại sao bạn không sử dụng tỷ lệ phần trăm? http://jsfiddle.net/zbbHc/38/ đó là cách bố trí hầu hết chất lỏng thường làm việc

Nguồn

2012-07-27 15:49:49 Paradise

Đó không phải là trung tâm. Trong Chrome, ít nhất. –

Bởi vì tôi cần có nó ở giữa trang .. –

căn giữa là một giải pháp thực sự cũ và bây giờ là một thứ mà mọi người nên ngừng sử dụng, có rất nhiều cách để căn giữa mọi thứ, kiểm tra twitter bootstrap, 960. gs chất lỏng và bạn sẽ tìm thấy ví dụ tuyệt vời về cách bố trí chất lỏng làm việc http://twitter.github.com/bootstrap/examples/fluid.html – Paradise

Khi bạn nói 'nếu' hàng cuối cùng có khối ít gì bạn có nghĩa rằng đó là nội dung động? Nếu bạn biết nó sẽ có một sau đó bạn chỉ có thể vị trí của nó tương đối với giá trị của một nửa chiều rộng của riêng mình (và bất kỳ lợi nhuận vv)

.iB:last-child{ 
    position:relative; 
    left:-100px; 
    background:blue; 
}

http://jsfiddle.net/zbbHc/54/

Nguồn

2012-07-27 16:13:57

Xin chào! Tôi không thể biết có bao nhiêu khối ở hàng cuối cùng vì tôi không biết kích thước cửa sổ trình duyệt của người dùng có thể. Nếu cửa sổ trình duyệt là rất rộng, nhiều khối hơn phù hợp trong một hàng ect. –

aah i see. hmm, trong trường hợp đó tôi không nghĩ DOM nhất thiết phải đăng ký những gì chúng ta thấy trên màn hình theo hàng, như 'hàng', nếu nó chỉ đưa nhiều mục vào một hàng trước khi ngắt dòng, nó sẽ không nhận ra các hàng. Tôi cũng có thể sai. Tôi sẽ nghiên cứu! câu hỏi thú vị! –

Có thể làm điều này với một bảng (mặc dù tôi có xu hướng cố gắng tránh các bảng). Kích thước của các ô trong bảng được xác định bởi nội dung của chúng (tất nhiên, bạn có thể thêm các tham số của riêng bạn hoặc tối đa/tối thiểu). Bạn có thể có một bảng với một cột và (mặc dù nó không phải là thực hành tốt nhất) nhúng divs vào bảng (mỗi div là một khối).

Chiều rộng của bảng sẽ là chất lỏng vì nó sẽ dựa trên chiều rộng của ô rộng nhất (do đó, các khối sẽ xếp hàng độc đáo và trông rất gọn gàng), và bạn có thể mã hóa hoặc viết mã Tất nhiên, tôi đề nghị viết kịch bản) một kiểu/phương thức để kiểm tra xem hàng cuối cùng có chứa ít khối hơn không và liệu nó có để đặt văn bản căn chỉnh sang trái cho ô đó hay không.

Giải pháp này có thể có thể sử dụng một số cải tiến, nhưng nó có thể là một khởi đầu tốt, tùy thuộc vào những gì bạn sẽ sử dụng này cho.

Nguồn

2012-07-27 17:08:13

khối div trung tâm nhưng không phải ở hàng cuối cùng

Trả lời

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