Làm thế nào để nổi một khoảng trong một div?

Tôi đang cố gắng tìm hiểu cách thực sự sử dụng CSS mà không cần sự trợ giúp của Bootstrap.Làm thế nào để nổi một khoảng trong một div?

Tôi đã sau đây: (có thể xem tại đây: http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE?p=preview)

<div class="block"> 
    <span class="pull-left">George</span> 
    <span class="pull-right">$23.20</span> 
</div> 

<div class="block"> 
    <span class="pull-left">Carl</span> 
    <span class="pull-right">$4.81</span> 
</div> 

<div class="block"> 
    <span class="pull-left">Steve</span> 
    <span class="pull-right">$0.34</span> 
</div>

và CSS ...

.pull-left { 
    float: left; 
} 

.pull-right { 
    float: right; 
} 

.block { 
    display: block; /* since, div, I don't need this right ?*/ 
    background-color: #87CEEB; 
    width: 100%; 
}

Nếu tôi đã sử dụng Bootstrap, tôi có thể đạt được hiệu quả mong muốn, bằng cách đặt html của tôi vào div container và thay vì sử dụng lớp tùy chỉnh của tôi là block, hãy thêm lớp btn và btn-block.

Tôi muốn đặt các tên thẳng đứng ở bên trái và giá căn chỉnh theo chiều dọc ở bên phải. Tôi đang thiếu gì?

Sắp xếp giống như:

George          $23.20 
Carl          $4.81 
Steve          $0.34

Xin đừng đề cập đến các bảng biểu, như tôi đã nói, tôi có thể sử dụng bootstrap và quấn html trên trong div.container, và sau đó sử dụng button.btn.btn-block thay vì div.block tôi để đạt được chính xác cùng một hiệu ứng. Cảm ơn.

Cập nhật 1:

OK, tôi không mong đợi có được nhiều hơn có thể một hoặc hai giải pháp, nhưng có khá một chút. Ai đó có thể giải thích ưu/nhược điểm của từng giải pháp? Tôi thực sự thua lỗ ở đây.

Giải pháp # 1:

Thêm một new div element:

<div class="block"> 
    <span class="pull-left">George</span> 
    <span class="pull-right">$23.20</span> 
    <div style='clear:both'></div> 
</div>

Giải pháp # 2:

Thêm clear:both; overflow:auto; đến lớp block bởi thgaskel

Giải pháp # 3:

Điều này dường như tạo ra lợi nhuận giữa các khối.

Changedisplay:block đến display:inline-block cho lớp block.

Giải pháp # 4:

Addfloat:left đến lớp block.

Giải pháp # 5:

phát hiện này trong khi rối tung xung quanh.Tạo một chọn mới:

.block:after { 
    content: ":" /* <--- at a complete loss why this works */ 
}

Giải pháp # 6:

Phát hiện này từ việc đọc this page.

.block:after { 
    content:""; 
    display: table; 
    clear: both; 
}

Tôi cảm thấy khá choáng ngợp và không chắc chắn nên chọn gì. Cảm ơn.

Nguồn

2013-07-30 JP Richardson

Thay vì display: block;, sử dụng dưới đây css

.block { 
display: inline-block; //change like this 
background-color: #87CEEB; 
width: 100%; 
}

Cập nhật: Kể từ khi khoảng cách là distrubing, tốt hơn sử dụng

.block { 
    display: block; 
    float: left; 
    background-color: #87CEEB; 
    width: 100%; 
}

Actaully inline-block có xu hướng rời khỏi không gian mà có thể ngăn chặn bằng nhiều cách.

Thậm chí điều này giải quyết vấn đề của bạn, kiểm tra jsfiddle

Nguồn

2013-07-30 04:29:42 Praveen

Nhưng 'btn-block' trong Bootstrap có một' display: block '? –

Điều này làm việc, nhưng tôi không hiểu tại sao điều này đặt một lề giữa các khối trong khi các giải pháp khác không? –

@JPRichardson Tôi không nghĩ rằng ưu và khuyết điểm trong việc áp dụng css. Điều duy nhất tôi sẽ nói, nó không nên ảnh hưởng đến các phong cách khác trong html của bạn. – Praveen

Bạn đang gần trong cách tiếp cận của bạn, điều duy nhất bạn sẽ cần phải làm gì để làm cho công việc này là để xóa phao sau khi nó được áp dụng cho nhịp.

Hãy nhìn vào cách clear công trình trong HTML/CSS: http://www.w3schools.com/cssref/pr_class_clear.asp

html của bạn sẽ trông như thế này:

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    </head> 

    <body> 
    <div class="block"> 
     <span class="pull-left">George</span> 
     <span class="pull-right">$23.20</span> 
     <div style='clear:both'></div> 
    </div> 

    <div class="block"> 
    <span class="pull-left">Carl</span> 
    <span class="pull-right">$4.81</span> 
    <div style='clear:both'></div> 
    </div> 

    <div class="block"> 
    <span class="pull-left">Steve</span> 
    <span class="pull-right">$0.34</span> 
    <div style='clear:both'></div> 
    </div> 


    </body> 

</html>

Nguồn

2013-07-30 04:29:45 JanR

lol ok, đã lưu ý :) – JanR

Bạn cũng có thể chỉ áp dụng 'clear: both; overflow: auto; 'vào lớp' .block'. – thgaskell

Jeeze, sooo nhiều giải pháp mà dường như làm việc ... Tôi thực sự không biết những ưu/nhược điểm của mỗi người. –

Thêm float:left; để .block lớp kể từ khi con của nó đang nổi rằng tại sao bạn cần phải float div cha của nó để có được chiều rộng đầy đủ

.block { 
    display: block; /* since, div, I don't need this right ?*/ 
    background-color: #87CEEB; 
    width: 100%; 
    float:left; 
}

Nguồn

2013-07-30 04:33:10 Hushme

bạn sẽ thấy sự khác biệt sau khi thêm các thẻ .. :) – zzlalani

Làm thế nào để nổi một khoảng trong một div?

Trả lời

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