Float bên trái và bên phải

vấn đề này đã làm phiền tôi một thời gian. Vì vậy, tôi đã tạo ra một số mô tả trực quan về vấn đề của tôiFloat bên trái và bên phải

Đầu tiên ở đây là cấu trúc HTML của tôi, tôi có 6 div .. 3 float đầu tiên bên trái và 3 float bên phải. Hình ảnh cuối cùng cho thấy kết quả tôi muốn nhưng dường như không thể có được. ai đó ra có thể giúp tôi đây

EDIT // Xin lỗi heres HTML và CSS của tôi

<style> 
    .left { float:left; } 
    .right { float:right; } 
</style> 
<div id="container"> 
    <div class="left"></div> 
    <div class="left"></div> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="right"></div> 
    <div class="right"></div> 
</div>

Chú ý: Tôi không thể làm một quyền trái phải trái tùy chọn đúng trái vì Im nhận được dữ liệu của tôi từ PHP thông qua một truy vấn cơ sở dữ liệu của tôi .. truy vấn đầu tiên đi lại truy vấn thứ hai đi đúng .... thanks a bunch

/EDIT

This is a mocukup of my HTML structure

My f loats dẫn này

this is my current result

Đây là những gì tôi muốn

I want this

Nguồn

2012-06-12 Oldenborg

Vui lòng đặt mã của bạn ... –

+1 cho hình ảnh đẹp, -1 để không đánh dấu hoặc CSS ở tất cả trong câu hỏi! –

một bên trái, một bên phải –

Bạn có thể sử dụng thuộc tính CSS3 column-count cho việc này. Viết như thế này:

.parent{ 
    -moz-column-count: 2; 
    -moz-column-gap: 50%; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 50%; 
    column-count: 2; 
    column-gap: 50%; 
} 
.parent div{ 
    width:50px; 
    height:50px; 
    margin:10px; 
} 
.left{ 
    background:red; 
} 
.right{ 
    background:green; 
}

Kiểm tra này http://jsfiddle.net/UaFFP/6/

Nguồn

2012-06-12 10:48:08 sandeep

Thật hữu ích khi đề cập đến hỗ trợ trình duyệt bất cứ khi nào bạn trả lời với các cột CSS3: http://caniuse.com/multicolumn. Ví dụ, điều này sẽ không hoạt động trong IE9, mà nhiều người cần hỗ trợ. – thirtydot

Đây chính là điều tôi đang tìm kiếm. Nhưng tôi cần hỗ trợ cho ie7 và lên. Vì vậy, nó không hoàn toàn hữu ích .. nhưng bạn có ý tưởng đúng như hầu hết các ppl didnt. Cảm ơn. – Oldenborg

Đối với IE, bạn có thể sử dụng JS http://www.csscripting.com/css-multi-column/ – sandeep

Thêm div trái đầu tiên, sau đó là người đầu tiên đúng div và sau khi họ thêm <br style="clear:both"> và lặp lại các thủ tục.

Sửa: Đây là một câu trả lời Cập nhật:

<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div> 
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div> 
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div> 
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>

Nguồn

2012-06-12 10:12:59

Xin lỗi, đây không phải là tùy chọn – Oldenborg

Vì sao? Bạn có thể làm cho **
** hoàn toàn không có biểu diễn trực quan. –

Im làm việc trên một dự án mà chỉ thig tôi có quyền truy cập vào là các tập tin CSS .. everyting khác là offlimits – Oldenborg

nổi một trái, đặt chúng ngay, và đưa ra đầu tiên clear: both tài sản

<div class="left clear"></div> 
<div class="right"></div> 
<div class="left clear"></div> 
<div class="right"></div>

css

.left {float:left} 
.right {float:right} 
.clear {clear:both}

Example

Nguồn

2012-06-12 10:14:59

@jacktheripper: tốt, bạn đã thực hiện nó trước tôi –

Giả sử bạn có một div khác ở giữa chúng. Sau đó, sử dụng thứ tự thời gian này:

<div class="left"></div> 
<div class="right"></div> 
<div class="content"></div>

Hoặc nếu không, chỉ cần thêm một div khác cung cấp kiểu clear:both cho nó.

Nguồn

2012-06-12 10:15:31

lớp không id;) –

oh, vâng. Cảm ơn @khaled_webdev –

Có để thao tác thứ tự của các yếu tố không phải là một giải pháp tốt hoặc. – crush

Sử dụng: selector và thanh toán bù trừ thứ n con sau 2 divs:

div { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    float: left; 
} 
div:nth-child(2n) { 
    background-color: green; 
    float: right; 
}

Live example

Nếu không sử dụng phương pháp khá hacky này, mà không yêu cầu phải đánh dấu thêm:

div { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    float: left; 
} 
div:nth-child(n) { 
    clear: both; 
} 

div:nth-child(2n) { 
    background-color: green; 
    float: right; 
    margin-top: -50px; //match this to the div height 
}

Live example

Nguồn

2012-06-12 10:19:47 jacktheripper

Tôi đã thử modding nó một chút nhưng cant dường như để làm cho nó đúng. Đây là nơi Im tại, tôi không thể chạm vào HTML .. điều này là cố định .. Tôi chỉ có thể làm việc với CSS [Live example] (http://jsfiddle.net/nSDcb/) – Oldenborg

<style type="text/css"> 

.parent {width:50px; border:1px solid red;} 

.left {float:left; } 

.right{float:right;} 

.child{height:50px;width:50px;border:solid 1px green;margin:0 0 10px 0;} 

</style> 

<body> 

<div class="left parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

<div class="right parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

</body> 

</html>

Hãy nhớ rằng sẽ không có DIV trung tâm, nếu đó là trường hợp thả nổi các dấu DIV bên trái, với độ rộng 20% 60% 20%.

Nguồn

2012-06-12 10:30:40 bdede

Tôi đã thực hiện điều này nhưng Im đã hướng dẫn không chạm vào HTML, tôi chỉ có thể thay đổi CSS – Oldenborg

HTML:

<div class="leftcolums"> 
    <div class="left">1</div> 
    <div class="left">2</div> 
    <div class="left">3</div>  
</div> 
<div class="rightcolums"> 
    <div class="right">4</div> 
    <div class="right">5</div> 
    <div class="right">6</div> 
</div> 
<div class="clear"></div>

STYLES:

.leftcolums{float:left;} 
.rightcolums{float:right;} 
.clear{clear:both;}

Nguồn

2014-02-15 21:43:06

column-count đã được hỗ trợ rộng rãi - http://caniuse.com/#feat=multicolumn Vì vậy, nếu các trình duyệt cũ doesn' t làm phiền bạn xem xét sử dụng tôi t.

Nguồn

2016-01-30 18:18:40 Vlad

Và bạn sẽ làm gì với nó (để giải quyết vấn đề của OP)? – dakab

Tôi muốn biết, 3 năm sau: D – Oldenborg

Float bên trái và bên phải

Trả lời

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