CSS tương đương của Bảng rowspan với Lỏng Chiều cao

Tôi đang cố gắng để thực hiện bằng cách sử dụng CSS sau:CSS tương đương của Bảng rowspan với Lỏng Chiều cao

<table border="1" width="300px"> 
<tr> 
    <td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td> 
    <td>Here is some sample text. And some additional sample text.</td> 
</tr> 
<tr> 
    <td>Here is some sample text. And some additional sample text.</td> 
</tr> 
</table>

alt text

Các ví dụ tôi đã nhìn thấy cho việc này tận dụng chiều cao cố định hoặc cho phép nội dung quấn quanh cột bên trái. Có một cách thanh lịch để thực hiện điều này bằng cách sử dụng CSS?

Nguồn

2010-04-09 Gabe Sumner

Trước hết, những gì bạn đang làm trông giống như một bảng với tôi, vì vậy bạn có thể muốn xem xét điều đó. Làm điều đó với CSS tuy nhiên sẽ phức tạp hơn một chút (trừ khi bạn làm kiểu dáng bảng trong CSS). Các mã sau đây hoạt động nhưng không tập trung dọc các văn bản trong hộp:

<html><head><title>Test2</title></head><body> 
<div style="width:300px; padding: 2px; border: 1px solid black;"> 
    <div style="float:right; width: 100px;"> 
    <div style="border: 1px solid black; margin-bottom: 2px;"> 
     Here is some sample text. And some additional sample text. 
    </div> 
    <div style="border: 1px solid black;"> 
     Here is some sample text. And some additional sample text. 
    </div> 
    </div> 
    <div style="border: 1px solid black; margin-right: 102px;"> 
    <div> 
     This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right. 
    </div> 
    <div style="clear: right; margin-bottom: -1px;"></div> 
    </div> 
</div></body></html>

tế bào Bảng trong CSS được dễ dàng hơn:

<!DOCTYPE html> 
<html><head><title>Test2</title></head><body> 
<div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;"> 
    <div style="display: table-cell; border: 1px solid black; vertical-align: middle;"> 
    This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right. 
    </div> 
    <div style="display: table-cell; width: 100px;"> 
    <div style="border: 1px solid black; margin-bottom: 2px;"> 
     Here is some sample text. And some additional sample text. 
    </div> 
    <div style="border: 1px solid black;"> 
     Here is some sample text. And some additional sample text. 
    </div> 
    </div> 
</div> 
</body> 
</html>

Nguồn

2010-04-09 22:50:36

Điều này khá gần. Tôi nhận thấy, ví dụ của bạn, khi cột bên trái chứa nhiều văn bản hơn 2 cột bên phải kết hợp các cột bên phải không tự động mở rộng để hấp thụ thêm không gian. Hành vi này tồn tại đối với các bảng. Trong mọi trường hợp, tôi đánh giá cao câu trả lời của bạn. –

Bạn nói đúng. Bạn có thể không bình thường làm cho phao phụ thuộc vào giá trị khác. Tạo kiểu cho các công cụ như bảng có thể là giải pháp tốt nhất nên vẫn có những ưu điểm của việc không sử dụng bảng html. Vấn đề duy nhất là nó không hoạt động trong IE <8. Bạn có thể muốn sử dụng biểu định kiểu có điều kiện cho điều đó (chỉ được hỗ trợ trong IE) thực hiện điều gì đó khác cho IE. –

Đây là những gì tôi sử dụng: http://www.ejeliot.com/samples/equal-height-columns/example-7.html

tôi chỉ sử dụng cột thứ hai như là một wrapper cho hai yếu tố khác (ít ngữ nghĩa). Đó sẽ là cách dễ nhất.

Nguồn

2010-04-09 21:37:11

liên kết chết liên kết chết – Ash

tôi cần một cái gì đó rất giống nhau. Thật không may tất cả các giải pháp này là khá phức tạp, tôi đi kèm với một cái gì đó rất đơn giản (có lẽ quá đơn giản) - được sử dụng display: inline-block

HTML

<div> 
    <span id="v"> 
     text in the left 
    </span> 
    <div id="x"> 
     <div>upper row</div> 
     <div>lower row</div> 
    </div> 
</div>

CSS

#x { 
    display: inline-block; 
    vertical-align: middle; 
}

fiddle

Nguồn

2013-05-03 10:31:13 SummerBreeze

'v' và' x' là * ID khủng khiếp *. – Dan

CSS tương đương của Bảng rowspan với Lỏng Chiều cao

Trả lời

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