Helpex - Trao đổi & giúp đỡ Đăng nhập
54

Tôi muốn một vùng chứa có hai cột. Chi tiết:

Thùng chứa

  • Chiều rộng nên điều chỉnh thành 100% phần tử mẹ của nó (dễ dàng hoàn thành).
  • Chiều cao phải điều chỉnh để chứa cả hai cột (nghĩa là chiều cao của nó phải chính xác bằng chiều cao lớn hơn của hai cột, do đó không có hiện tượng tràn và thanh cuộn không bao giờ hiển thị)
  • Nên có kích thước tối thiểu bằng gấp đôi chiều rộng của cột bên trái.

Các cột nói chung

  • Phải có chiều cao thay đổi, điều chỉnh theo chiều cao của nội dung của chúng.
  • Nên cạnh nhau, sao cho các cạnh trên cùng của chúng thẳng hàng.
  • Không nên phá vỡ bố cục hoặc bọc dưới nhau nếu ngay cả một pixel của đường viền, phần đệm hoặc lề được áp dụng cho một trong hai pixel, vì điều đó sẽ cực kỳ không ổn định và đáng tiếc.

Cột bên trái cụ thể

  • Phải có chiều rộng cố định, tuyệt đối tính bằng đơn vị pixel.

Cột bên phải cụ thể

  • Chiều rộng phải lấp đầy không gian còn lại trong vùng chứa. Nói cách khác...
  • Chiều rộng phải bằng chiều rộng vùng chứa trừ đi chiều rộng của cột bên trái, sao cho nếu tôi đặt một phần tử khối DIV bên trong cột này, hãy đặt chiều rộng của nó thành 100%, cung cấp cho nó chiều cao bằng 10px và đặt màu nền cho nó, Tôi sẽ thấy một dải màu cao 10px đi từ cạnh phải của cột bên trái sang cạnh phải của vùng chứa (tức là nó lấp đầy chiều rộng của cột bên phải).

Yêu cầu ổn định

Vùng chứa sẽ có thể thay đổi kích thước (bằng cách thay đổi kích thước cửa sổ trình duyệt) xuống chiều rộng tối thiểu của nó (được chỉ định trước đó) hoặc thành chiều rộng lớn hơn nhiều mà không phá vỡ bố cục. "Ngắt" sẽ bao gồm cả kích thước thay đổi của cột bên trái (hãy nhớ nó phải có chiều rộng pixel cố định), cột bên phải bao bọc bên dưới cột bên trái, thanh cuộn xuất hiện, các phần tử khối trong cột bên phải không chiếm toàn bộ chiều rộng cột , và nói chung, bất kỳ thông số kỹ thuật nào đã nói ở trên không đúng.

Lý lịch

Nếu các phần tử nổi được sử dụng, sẽ không có khả năng cột bên phải bọc bên dưới cột bên trái, vùng chứa sẽ không chứa được cả hai cột (bằng cách cắt bớt bất kỳ phần nào của cột hoặc cho phép bất kỳ phần nào của cột tràn ra ngoài ranh giới của nó ), hoặc các thanh cuộn đó sẽ xuất hiện (vì vậy tôi rất mệt mỏi khi đề xuất sử dụng bất kỳ thứ gì khác ngoài tràn: ẩn để kích hoạt tính năng chứa phần tử nổi). Áp dụng đường viền cho các cột không được phá vỡ bố cục. Nội dung của các cột, đặc biệt là cột bên phải, không được phá vỡ bố cục.

Có vẻ như có một giải pháp dựa trên bảng đơn giản cho điều này, nhưng trong mọi trường hợp, nó đều thất bại thảm hại. Ví dụ: trong Safari, cột bên trái có chiều rộng cố định của tôi sẽ co lại nếu vùng chứa quá nhỏ, thay vì duy trì chiều rộng mà tôi đã chỉ định. Có vẻ như cũng có trường hợp chiều rộng CSS, khi được áp dụng cho phần tử TD đề cập đến chiều rộng tối thiểu, sao cho nếu thứ gì đó lớn hơn được đặt bên trong nó, nó sẽ mở rộng. Tôi đã thử sử dụng table-layout: fixed; không giúp ích gì. Tôi cũng đã thấy trường hợp phần tử TD đại diện cho cột bên phải sẽ không mở rộng để lấp đầy khu vực còn lại, hoặc nó sẽ xuất hiện (ví dụ: cột thứ ba rộng 1px sẽ bị đẩy sang bên phải), nhưng đặt một đường viền xung quanh cột bên phải sẽ cho thấy rằng nó chỉ rộng bằng nội dung nội tuyến của nó,

Một giải pháp tiềm năng mà tôi đã thấy là quá phức tạp; Tôi không thể quan tâm hơn đến IE6, miễn là nó hoạt động trên IE8, Firefox 4 và Safari 5.

54 hữu ích 0 bình luận 126k xem chia sẻ
83

Của bạn đây:

<html>
<head>
  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
      /* Change this to whatever the width of your left column is*/
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="left">
      Hello
    </div>
    <div id="right">
      <div style="background-color: red; height: 10px;">Hello</div>
    </div>
    <div class="clear"></div>
  </div>
</body>

</html>
Mở rộng đoạn mã

Xem nó hoạt động tại đây: http://jsfiddle.net/FVLMX/

83 hữu ích 3 bình luận chia sẻ
21

Tôi có thể ít quan tâm đến IE6 hơn, miễn là nó hoạt động trên IE8, Firefox 4 và Safari 5

Điều này làm cho tôi hạnh phúc.

Hãy thử cái này: Live Demo

display: tablelà tốt một cách đáng ngạc nhiên. Một khi bạn không quan tâm đến IE7, bạn có thể tự do sử dụng nó. Nó không thực sự có bất kỳ nhược điểm thông thường nào <table>.

CSS:

#container {
    background: #ccc;
    display: table
}
#left, #right {
    display: table-cell
}
#left {
    width: 150px;
    background: #f0f;
    border: 5px dotted blue;
}
#right {
    background: #aaa;
    border: 3px solid #000
}
21 hữu ích 5 bình luận chia sẻ
0

Miếng bánh.

Sử dụng 960Grids Đi tới trình tạo bố cục tự động và tạo thiết kế hai cột, linh hoạt. Xây dựng một cột bên trái theo chiều rộng của lưới hoạt động .... đây là thách thức duy nhất khi sử dụng lưới và nó rất dễ dàng khi bạn đọc một hướng dẫn. Tóm lại, mỗi cột trong lưới có độ rộng nhất định và bạn đặt số lượng cột bạn muốn sử dụng. Để có được một cột chính xác với một chiều rộng nhất định, bạn phải điều chỉnh toán học của mình để chiều rộng cột của bạn chính xác. Không quá khó.

Không có cơ hội kết thúc bởi vì những người khác đã chiến đấu trong trận chiến đó cho bạn. Khả năng tương thích trở lại chừng nào bạn có thể sẽ cần. Nhanh chóng và dễ dàng .... Bây giờ, hãy tải xuống, tùy chỉnh và triển khai.

Thì đấy. Lưới FTW.

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ html css resizable two-column-layout , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading