Đang cố gắng để tạo ra một bảng tùy chỉnh

Tôi đang cố gắng để tạo ra một bảng trông như thế này:Đang cố gắng để tạo ra một bảng tùy chỉnh

Nhưng tôi không hoàn toàn chắc chắn làm thế nào để đi về làm điều đó.

Kết quả cuối cùng là vụ phải giống như thế này:

Tôi đã lên kế hoạch về việc thực hiện một div, và sau đó thiết lập các nền của div là một phần kết cấu màu xám, và sau đó tạo ra một bảng bên trong div đó để tổ chức nội dung. Sử dụng bảng trong tình huống này có đúng không? Hoặc là có một phương pháp tốt hơn? Cảm ơn trước.

Nguồn

2013-06-13 Bucthree

Phương pháp tốt hơn là chỉ sử dụng div cho mỗi phần. Tôi đang làm việc trên jsFiddle để cho bạn thấy khái niệm. –

và sau đó chỉ cần thả chúng sang trái và phải trong div vùng chứa? – Bucthree

Bạn có thể muốn xem các thành phần giàn giáo bootstrap, hoặc bạn có thể đặt chiều rộng cố định cho mỗi div của hàng. Nhưng dù sao, tại sao bạn không sử dụng bảng? – choz

Gắn vào đánh dấu không phải bảng. Các phương pháp hay nhất hiện nay sẽ đề xuất bạn chỉ nên sử dụng các bảng cho dữ liệu dạng bảng và nội dung này không phải là dữ liệu dạng bảng.

Có một số phương pháp khác nhau mà bạn có thể sử dụng để thực hiện việc này, bao gồm sử dụng phao, hiển thị khối nội tuyến và các phương thức khác. Ngoài ra còn có những cân nhắc với nội dung bao quanh các hình ảnh (ví dụ: nếu nội dung dài).

Nhưng dưới đây là một số mã mẫu để bạn có thể quay.

Styles:

div.left, 
div.right { 
    width: 400px; 
    overflow: hidden; /* forces the div to clear the floated content */ 
} 

div.left img, 
div.right img { 
    border: 2px solid #888; 
} 

div.left img { 
    float: left; 
    padding-right: 20px; 
} 

div.right img { 
    float: right; 
    padding-left: 20px; 
}

Các đánh dấu html:

<div class="left"> 
    <img src="your_image_source"><p>Lorem Ipsump dolor sit amet</p> 
</div> 
<div class="right"> 
    <img src="your_image_source"><p>Lorem Ipsum dolor sit amet</p> 
</div>

Nguồn

2013-06-13 19:20:05

Tuyệt vời! Cảm ơn bạn rất nhiều, điều này đã làm việc! – Bucthree

Đánh dấu ít đẹp hơn .. = ít byte hơn .. – choz

Đây là một DEMO

này sẽ cho bạn thấy chính xác những gì bạn cần.

<body> 
    <div id="topLeft"></div> 
    <div id="topRight"></div> 
    <div id="middleLeft"></div> 
    <div id="middleRight"></div> 
    <div id="bottomLeft"></div> 
    <div id="bottomRight"right></div> 
</body> 

body { 
    height:400px; 
} 
#topLeft { 
    background-color:#000000; 
    width:32%; 
    height:32%; 
    margin:5px; 
    float:left; 
} 
#topRight { 
    float:right; 
    background-color: #000000; 
    width:65%; 
    height:32%; 
    margin:5px; 
} 
#middleLeft { 
    background-color:#000000; 
    width:65%; 
    height:32%; 
    margin:5px; 
    float:left; 
} 
#middleRight { 
    float:right; 
    background-color: #000000; 
    width:32%; 
    height:32%; 
    margin:5px; 
} 
#bottomLeft { 
    float:left; 
    background-color: #000000; 
    width:32%; 
    height:32%; 
    margin:5px; 
} 
#bottomRight { 
    float:right; 
    background-color: #000000; 
    width:65%; 
    height:32%; 
    margin:5px; 
}

Cơ thể có thể được thay thế bằng trình bao bọc và kích thước phù hợp.

Code on jsFiddle

Nguồn

2013-06-13 19:24:12

Fooey trên những người ghét nói không sử dụng bảng. Tôi hoàn toàn sẽ sử dụng một bảng cho việc này.

<table> 
    <tr> 
    <td colspan=1><img src="yadayada"></td> 
    <td colspan=2>Lorem Ipsum...</td> 
    </tr> 
    <tr> 
    <td colspan=2>Lorem Ipsum...</td> 
    <td colspan=1><img src="yadayada"></td> 
    </tr> 
    <tr> 
    <td colspan=1><img src="yadayada"></td> 
    <td colspan=2>Lorem Ipsum...</td> 
    </tr> 
</table>

Nguồn

2013-06-13 19:34:28

Điều này không phải lúc nào cũng hoạt động: các trình duyệt có thể bị lẫn lộn về việc tính toán độ rộng cột nếu các cột được nói không bao giờ xuất hiện chưa được hợp nhất. Nó là bao la thích hợp hơn để sử dụng một trong các tùy chọn floaty cho những gì OP muốn. – Martha

Không ghét, chỉ cần xuống đường sử dụng bảng để bố trí và trả giá. Mẫu này có nhiều đánh dấu hơn và ít có thể điều chỉnh hơn bố cục không phải bảng. Với giải pháp không phải bảng, một cú nhấn nhanh của css có thể thực hiện các thay đổi không thể thực hiện bằng giải pháp bảng. –

Đang cố gắng để tạo ra một bảng tùy chỉnh

Trả lời

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