與橫跨列的元素的CSS問題

概述：
我試圖創建一個相對簡單的頁面佈局下面詳細和運行到問題，無論我如何嘗試接近它。與橫跨列的元素的CSS問題

概念：
- 標準尺寸塊佈局。我會引用單位寬度：每個內容塊都是240px正方形，周圍有5px的邊距。
- 固定寬度爲1單位的左列（245px - 1塊+左邊距）。這裏沒有問題。
- 可變寬度的右列填充剩餘空間。這裏也沒有問題。
- 在左列中，固定在列的下方有多個1單元x 1單元塊。頂部還有一些空白 - 再次，不是問題。
- 在右欄中：一些標準單位大小的自由浮動塊，它們浮動並填充由瀏覽器窗口給予它們的空間。這裏沒有問題。
- 最後，一個單元2個單元寬，左半列，右半列，右列的塊仍然浮動。 這裏是龍。

See here for a diagram。

問題：
無論我如何處理這個問題，都會出錯。以下是我現有解決方案嘗試的代碼。我目前的問題是，右側的1x1塊不尊重2x1塊，因此2x1塊的一半被右側列中的1x1塊覆蓋。

我知道，這幾乎肯定是一個問題，position: absolute將事情排除在外。然而，不能真正找到一種方式，而不是僅僅拋出另一個問題。

代碼：

<html> 
<head> 
    <title>wat</title> 
    <style type="text/css"> 
    body { 
     background: #ccc; 
     color: #000; 
     padding: 0px 5px 5px 0px; 
     margin: 0px; 
    } 

    #leftcol { 
     width: 245px; 
     margin-top: 490px; 
     position: absolute; 
    } 

    #rightcol { 
     left: 245px; 
     position: absolute; 
    } 

    #bigblock { 
     float: left; 
     position: relative; 
     margin-top: -240px; 
     background: red; 
    } 

    .cblock { 
     margin: 5px 0px 0px 5px; 
     float: left; 
     overflow: hidden; 
     display: block; 
     background: #fff; 
    } 
    .w1 { 
     width: 240px; 
    } 
    .w2 { 
     width: 485px; 
    } 
    .l1 { 
     height: 240px; 
    } 
</head> 
<body> 
    <div class="cblock w2 l1" id="bigblock"> 
    <h1>DRAGONS</h1> 
    <p>Here be they</p> 
    </div> 
    <div id="leftcol"> 
    <div class="cblock w1 l1"> 
     <h1>Left 1</h1> 
     <p>1x1 block</p> 
    </div> 
    </div> 
    <div id="rightcol"> 
    <div class="cblock w1 l1"> 
     <h1>Right 1</h1> 
     <p>1x1 block</p> 
    </div> 
    <div class="cblock w1 l1"> 
     <h1>Right 2</h1> 
     <p>1x1 block</p> 
    </div> 
    <div class="cblock w1 l1"> 
     <h1>Right 3</h1> 
     <p>1x1 block</p> 
    </div> 
    <div class="cblock w1 l1"> 
     <h1>Right 4</h1> 
     <p>1x1 block</p> 
    </div> 
    <div class="cblock w1 l1"> 
     <h1>Right 5</h1> 
     <p>1x1 block</p> 
    </div> 
    <div class="cblock w1 l1"> 
     <h1>Right 6</h1> 
     <p>1x1 block</p> 
    </div> 
    <div class="cblock w1 l1"> 
     <h1>Right 7</h1> 
     <p>1x1 block</p> 
    </div> 
    </div> 
</body> 
</html>

約束：
最後一個音符，我需要跨瀏覽器兼容，雖然我不是很高興，如果必要的JS執行於此。也就是說，如果存在一個純CSS的解決方案，我會非常高興。

來源

2010-05-01 Cyrus Lyons

在#bigblock：

刪除的margin-top：-240px
添加保證金左：-240px

然後，在右列的地方#bigblock，使得它第五個DIV。

請注意，這隻適用於固定寬度的容器。如果您調整瀏覽器大小，您會看到#bigblock四處移動。

你看過任何CSS框架，如bluprint或960 Grid System？他們可能會幫助你實現你正在尋找的東西。

來源

2010-05-01 21:47:08

感謝您的建議。我曾考慮過將右列固定寬度，但這隻能真正避開這個問題，我真的希望它具有彈性。我正在尋找另一種可能的解決方案（完全移除左列容器，並將所有內容直接放在身體上），並將回發這種情況。我還沒有看過任何框架。我很可能會這樣做。同時歡迎任何其他想法... – 2010-05-01 23:20:17

-1

我有與列布局相同的問題。我通過使用margin-left：40px來修復它;在CSS文件中。另外，不要使用overflow：hidden;這隱藏了列表式圓圈。我希望這可以幫助。

來源

2014-11-04 12:30:16

與橫跨列的元素的CSS問題

回答

相關問題