Làm cho phần tử nút điền chiều rộng có sẵn

Question

Có rất nhiều câu hỏi "lấp đầy không gian trống" trên trang web này, nhưng vấn đề của tôi hơi đặc biệt ở chỗ tôi đã nhận được giải pháp nhưng nó không hoạt động cho các nút . Tôi muốn hiểu tại sao điều này không hoạt động cho các nút và cách tôi có thể làm việc. Tôi tưởng tượng nó chỉ là một số phong cách trình duyệt cho các yếu tố nút mà tôi cần phải ghi đè lên.

Tôi có hai phần tử thả nổi trong một div gói (chiều rộng cố định, nếu có vấn đề). Phần tử bên phải có chiều rộng cố định và phần tử bên trái sẽ chiếm bất kỳ chiều rộng nào.

Tôi có thể thực hiện điều đó bằng cách đặt phần tử phù hợp để có chiều rộng cố định và float: right và để phần tử bên trái không có kiểu dáng đặc biệt. Điều này làm việc hoàn hảo cho divs. Nó cũng hoạt động cho các nhịp, nhưng chỉ khi tôi đặt display: block trên chúng. Đối với các nút, tôi không thể làm cho nó hoạt động. Tôi đã thử chặn, chặn nội dòng và mọi giá trị tối nghĩa width tôi có thể tìm thấy trên MDN.

http://jsfiddle.net/wjFbD/2/

---

Tôi không biết tại sao tôi không nghĩ đến việc chỉ gói các nút trong divs trước đó. Dưới đây là những gì tôi đã đưa ra:

http://jsfiddle.net/SkczB/2/

này liên quan đến overflow: hiddenbox formatting context trick (mà tôi nghi ngờ đang diễn ra để làm cho một xuất hiện ở đây, nhưng không thể nhìn thấy nơi để phù hợp với nó trong). Điểm nổi bật:

1. Hai nút được gói trong div với nút lớpWrapper.
2. Các div đó được định dạng theo mẹo tôi đã nêu trong đoạn thứ ba, ở trên. Div bên phải có float: phải và chiều rộng cố định, div bên trái không có kiểu dáng đặc biệt.
3. Hiện tại, chúng tôi áp dụng thủ thuật bối cảnh định dạng hộp. Các div bên trái được cho overflow: hidden, làm cho nó tạo ra không gian cho div được thả nổi bên phải.
4. Hiện tại, chúng tôi có thể áp dụng lề trái cho div bên phải và thay đổi chiều rộng của nó và div bên trái sẽ luôn có kích thước phù hợp.
5. Các div tạo hiệu ứng "chiều rộng có sẵn" mong muốn cho chúng ta, bây giờ chúng ta chỉ cần đặt các nút bên trong các div và cung cấp cho chúng một chiều cao và chiều rộng là 100%.
6. Nếu đó là nút bên trái bạn muốn có chiều rộng cố định, thì về cơ bản lặp lại các bước trên với trái và phải hoán đổi.

Answer 1

này có thể không chính xác những gì bạn đang tìm kiếm ở đây, nhưng đây là một lựa chọn mà dường như đã làm việc ra cho tôi với fiddle của bạn.

Nếu bạn có một chiều rộng cố định div mà các phần tử được chứa trong, bạn có thể chia được chiều rộng còn lại của div sau khi nút A đã được đặt để lấp đầy, nói 100 pixel và sau đó đặt nút 2 thành là kích thước còn lại.

Ngoài ra, một tùy chọn khác là chạy theo tỷ lệ phần trăm 20%/80%, 30%/70%, loại điều đó. Đây là một fiddle mà đạt được những gì bạn đang tìm kiếm trên chỉ là wrapper nút ở phía dưới. Tôi đã áp dụng các lớp cụ thể cho nó và thêm divs xung quanh mỗi nút để kiểm soát nhiều hơn một chút. Các nút div của trình bao bọc được đặt thành 20% và 80% tương ứng, trong khi nút được đặt để lấp đầy 100% không gian chứa.

Đây là fiddle được sửa đổi và HTML/CSS được modfied. Hy vọng nó giúp cho những gì bạn đang tìm kiếm ...

http://jsfiddle.net/wjFbD/7/

HTML

<div class="btnWrapper"> 
    <div class="buttonWrapperB"> 
    <button class="left"> 
     button Left 
    </button> 
    </div> 
    <div class="buttonWrapperA"> 
    <button class="right"> 
     button Right 
    </button> 
    </div> 
</div>​ 

CSS

.btnWrapper 
{ 
    width: 100%; 
    background-color: #FEE; 
    border: 2px solid black; 
    margin-bottom: 10px; 
    height: 50px; 
} 

.buttonWrapperB{ 
    float: left; 
    width: 20%; 
} 
.buttonWrapperB button{ 
    width: 100%; 
    height: 50px; 
} 

.buttonWrapperA{ 
    float:left; 
    width: 80%;    
} 

.buttonWrapperA button{ 
    width: 100%; 
    height: 50px; 
} 

Answer 2

Tôi đã điều chỉnh độ mờ nền của các yếu tố .right để xem điều gì đang diễn ra bên dưới chúng. Có vẻ như các yếu tố .left không chỉ chiếm phần còn lại - chúng cũng chiếm toàn bộ hàng. Thật kỳ lạ, văn bản bên trong các phần tử này được căn giữa như thể nó chỉ chiếm không gian còn lại.

Nếu bạn muốn cùng làm việc cho các nút, có vẻ như giải pháp duy nhất liên quan đến một chút hack. Các nút khá phức tạp.

button.left { 
    margin: 0; 
    position: absolute; /*this seems to be the only way to get the button to stay on the same row - floating it left won't even work*/ 
    z-index: -1; /*hides the "overflowing" part below the right button*/ 
    width: 100%; /*make the button stretch to the full width of the row*/ 
    padding-right: 400px; /*add a padding-right hack so that text will be centered correctly - should be same size as fixed width .right element*/ 
    padding-left: 0; 
    display: block; 

} 

Xem fiddle Cập nhật: http://jsfiddle.net/wjFbD/6/

Answer 3

bắt đầu với

Một phần tử có chiều rộng cố định và phần tử kia phải chiếm bất kỳ chiều rộng nào còn lại.

đây là giải pháp chung của tôi:

<div class="container"> 
    <div class="two">125&thinsp;€</div> 
    <div class="one">my favorite provider</div> 
</div> 

(stylus syntax, in your mind just add {,},;) 

.one // red 
    border none 
    height auto 

    overflow hidden 
    white-space nowrap 
    text-overflow ellipsis 
.two // green 
    float left 
    white-space nowrap 
    text-overflow ellipsis 

Bạn có thể đặt một điều xanh để có chiều rộng cố định, nhưng trên thực tế, bạn thậm chí không phải! Những điều đầy đủ lên độc đáo. Và String nhận được cắt ngắn với một dấu chấm lửng, nếu nó quá dài.

Mọi thứ trở nên phức tạp hơn, khi một trong số đó là <button> thay vì <div> (và tôi không thể tìm ra, thuộc tính kiểu nào khác biệt với chúng, vì vậy tôi cần phải tạo kiểu), nhưng với một wrapper, mà cũng làm việc:

→ Xem full codepen here. (Phản hồi được đánh giá cao.)