CSS - chiều rộng không được tôn trọng trên thẻ span

Question

Tôi gặp sự cố với một trong các nhịp của mình. Hãy cosider phong cách sau:

.form_container .col1che 
{ 
float: left; 
width: 4%; 
text-align: left;  
} 

.form_container .col2che 
{ 
float: left; 
width: 80%; 
text-align:left; 
} 

.form_container .col3che 
{ 
float: right; 
width: 13%; 
text-align:right; 
} 

Những 3 nhịp trong mã của tôi:

<div class="row"><!-- start: "row" --> 
    <span class="col1che">   
      <?php //some db feeds ?>   
    </span> 
    <span class="col2che"> 
      <?php //some db feeds ?> 
    </span> 
    <span class="col3che"> 
      <?php //some db feeds ?> 
    </span> 
    <div class="clear"></div> 
</div><!-- end: "row" --> 

Vấn đề xảy ra khi không có dữ liệu sẽ được hiển thị trong "COL1CHE" (hoặc thậm chí có thể ở bất kỳ trong số họ mặc dù tôi không chắc chắn) khi không có dữ liệu khoảng này "sụp đổ" và chiều rộng của nó không được tôn trọng. Điều này xảy ra trong Firefox, trong IE nó không "sụp đổ".

Tôi đã bao gồm lớp "rõ ràng" để xem liệu điều này có giúp ích hay không.

Bất kỳ ý tưởng nào?

Answer 1

display: blocksẽ không giúp bạn ở đây vì khi phao được kích hoạt, các phần tử được tự động chuyển sang chế độ chặn, bất kể chế độ ban đầu của nó, vì vậy chiều rộng của bạn sẽ hoạt động.

Sự cố có thể xảy ra với thẻ trống rỗng <span> có thể không được hiển thị vì một số quy tắc tối nghĩa mà tôi không thể nhớ. Bạn nên cố gắng ngăn không cho khoảng trống của mình bị trống, có thể bằng cách thêm   nếu nội dung trống.

Answer 2

Để thực hiện công việc này chỉ cần thêm

display: block; 

Để phong cách.

Answer 3

Span là phần tử nội tuyến và do đó bạn không thể đặt chiều rộng. Để đặt chiều rộng, trước tiên bạn phải đặt chiều rộng thành phần tử khối với

display:block; 

Sau đó bạn có thể đặt chiều rộng. Vì span là phần tử nội tuyến gốc, bạn cũng có thể sử dụng khối nội tuyến và thậm chí nó sẽ hoạt động trong IE:

display:inline-block; 

Answer 4

Chiều rộng không được vinh danh vì span là phần tử nội tuyến. Để sửa lỗi này, thêm:

display: inline-block; 

Tùy thuộc vào tình hình của bạn, display: inline-block có thể tốt hơn so với display: block vì bất kỳ nội dung sau span sẽ không bị buộc vào một dòng mới.

Answer 5

Hiển thị block và tùy chọn thả nổi left đã giúp tôi.

display: block; 
float: left;