CSS寬度和列問題

我看不到我在這裏做錯了什麼。我正在處理三列布局的寬度和邊距，我想將右側邊欄加寬到左側的空白處。CSS寬度和列問題

但是，當我增加＃側欄的寬度 - 右側22％以上時，兩個側欄下降到內容下方。我錯過了一些與寬度和邊距相結合的事情。

HTML和CSS低於圖像。這也是一個有反應的結構，如果這有所作爲。我需要繼續使用這個CSS和HTML，因爲它是一個WordPress主題，我不想移入另一種類型的CSS列或框結構。

更新12年10月23日我放棄了努力適應目前的CSS和HTML，並改爲盒模型佈局CSS的網頁模板，因爲盒模型效果很好，我能夠簡化我的頁面模板也是。

任何想法？

enter image description here

HTML：

<body class="three-column"> 

    <div id="page"> 
    <div id="main"> 
    <div id="primary"> 
    <div id="content" role="main"> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, 
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 
    </div> 

    <div id="sidebar-right"> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, 
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 

    <div id="sidebar-left"> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, 
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 
    </div> 
    </div> (some closing divs omitted for clarity).

CSS：

#page { 
margin: 1em auto; 
max-width: 1075px; 
} 

#main #secondary { 
float: none; 
margin: 0 7.6%; 
width: auto; 
} 

.three-column #page { 
max-width: 1075px; 
} 

.three-column #primary { 
float: left; 
margin: 0 -26.4% 0 0; 
width: 100%; 
} 

.three-column #content { 
margin: 0 34% 0 20%; 
width: 44%; 
border:1px solid #c2c2c2; 
padding:10px; 
} 

.three-column #sidebar-right { 
float: right; 
margin-right: 1.5%; 
width: 22%; 
border:1px solid #c2c2c2; 
padding:10px; 
} 

.three-column #sidebar-left{ 
position:relative; 
float: left; 
width: 15%; 
margin-left: -72%; 
border:1px solid #c2c2c2; 
padding:10px; 
}

來源

2012-10-14 markratledge

Flexbox的應該解決的問題。 http://css-tricks.com/old-flexbox-and-new-flexbox/ –

您是否嘗試過邊框框大小調整？它應該完美地工作，並使其每列都包含填充，邊距等等，即指定的寬度。您還應該嘗試爲中心列定義寬度。 –

您的保證金屬性值中的連字符對我來說是新的。他們在做什麼？ –

你的問題是#primary的-26.4％，右邊距和-72％左邊界在＃側欄左側。

我已經調整了那些小提琴;我放棄了側邊欄左邊緣（但爲了填充而保留了1.5％），並將＃小學的右邊距調整爲-100％。

http://jsfiddle.net/mstauffer/CtkyN/1/

這仍然是相當不錯的劈-Y。如果有什麼辦法，你可以有更好的經驗來重新處理HTML和CSS ..但是如果沒有，那麼這個小提琴至少可以讓你在這個現有的框架內重新調整右側邊欄的大小。

更新：我沒有可靠的消息來源，但我可以解釋的CSS數學。一般來說，你在#primary上使用負邊距來放置#primary通常佔據的區域中的其他兩個div。通常情況下，唯一的方法是將div設置爲position: fixed或position: absolute。因爲這些都很難，像這樣的佈局通常可以通過三個左浮動塊（或將來的flexbox）來完成，但是由於HTML的順序是不可能的。

相反，你不得不說服CSS渲染器#primary不介意被過度奠定了...你通過設置-100％的負利潤，本質上說，「在這裏做，都這個空間，你可以重疊它。「打開空間後，使用左右浮動（和寬度縮小）將側邊欄放置在#content任一側的空白處。

我希望有幫助！

來源

2012-10-16 20:56:42

謝謝，這非常有效，我應該用小提琴開始（我一直在使用它們的JavaScript）。我一直在使用CSS，因爲它是一個Wordpress主題，我適應了兩個側邊欄，即使它很古怪。現在，對於你的mods，唯一不起作用的是當瀏覽器縮小到750px以下時，內容覆蓋了右邊欄。有沒有辦法讓中間內容分區響應？沒有什麼大不了的，但750px對於手機來說太寬了。 – markratledge

有沒有一些例子可以迴應這樣的三列而沒有古怪的負邊限等？也許我應該從頭開始。 – markratledge

當然，我現在正在處理一個。 –

編輯：

我做了三列布局，可能會爲你工作。

HTML

<body class="three-column"> 
    <div id="page"> 
     <div id="main"> 
      <div id="primary"> 
       <div id="container"> 
        <div id="sidebar-left"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, 
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 
        </div> 

        <div id="content"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, 
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 
        </div> 

        <div id="sidebar-right"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, 
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

CSS

#container { 
    text-align: left; 
    margin: 0px auto; 
    padding: 0px; 
    border:0; 
    width: 80%; 
} 

#sidebar-left { 
    float: left; 
    width: 30%; 
    min-height: 300px; 
    background-color: #cccccc; 
} 

#sidebar-right { 
    float: left; 
    width: 25%; 
    min-height: 300px; 
    background-color: #cccccc; 
} 

#content { 
    float: left; 
    width: 30%; 
    min-height: 300px; 
    background-color: #999999; 
}

我也注意到，具有用於佈局的邊界會造成問題。可能會添加以下內容將有助於保持div內的邊界。

-webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
     box-sizing: border-box;

See this article。

希望這會有所幫助。

來源

2012-10-17 06:31:41

這不起作用。 – markratledge

我編輯了答案。請再試一次。 –

我認爲這個問題是具體位置：

.three-column #content { 
margin: 0 34% 0 20%; 
}

保證金：右上左下;

所以你必須減少右邊距，讓右邊欄擴大。
不要試一試。你最好測試一下。

來源

2012-10-18 04:55:40

這不起作用。 – markratledge

使用此代碼： -

HTML

<body class="three-column"> 

    <div id="page"> 
    <div id="main"> 
    <div id="primary"> 
    <div id="sidebar-left"> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, 
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 
    <div id="content" role="main"> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, 
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 
    </div> 

    <div id="sidebar-right"> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, 
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed 
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 


    </div> 
    </div> (some closing divs omitted for clarity).

CSS

#page { 
margin: 1em auto; 
max-width: 1075px; 
} 

#main #secondary { 
float: none; 
margin: 0 7.6%; 
width: auto; 
} 

.three-column #page { 
max-width: 1075px; 
} 

.three-column #primary { 
float: left; 
margin: 0 -26.4% 0 0; 
width: 100%; 
} 

.three-column #sidebar-left{ 
position:relative; 
float: left; 
width: 15%; 
} 

.three-column #content { 
margin: 0 34% 0 20%; 
width: 44%; 
border:1px solid #c2c2c2; 
padding:10px; 
float: left; 
} 

.three-column #sidebar-right { 
float: left; 
margin-right: 1.5%; 
width: 22%; 
border:1px solid #c2c2c2; 
padding:10px; 
}

來源

2012-10-18 10:56:46 suiz

這不起作用。 – markratledge

它很容易其實你很接近你忘了填充，增加的寬度你的內容，所以如果你有3個div，20％寬度和10％保證金& 10％填充在每一邊你會得到超越你必須移動的100％。

工作的jsfiddle here

來源

2012-10-18 14:53:33

其他人已經給你解釋。我只是想添加視覺表示，以便更容易看到問題。 The problem area

來源

2012-10-18 16:55:17 mehulved

.three-column #content DIV是中間的內容也需要有保證金向左DIV寬+ padding和margin權#sidebar-right DIV寬+填充，無需固定寬度，中間的內容。

檢查sample和code。

來源

2012-10-19 05:45:01 sureshunivers

編輯：我沒有看到你必須留在同一CSS的評論。可能除了你現在擁有的東西外，還可以使用它，但是如果不是，請不要理會。

如果您使用行流體和div跨度，您可以縮放它們而不會產生很多問題。 CSS是在提琴手。

http://jsfiddle.net/GeyHC/1/

<div class="row-fluid"> 
    <div class="span2" id="content" role="main" style="border:1px solid #c2c2c2;"> 

     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, 
     quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed 
     imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
     et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 

    <div class="span6" id="sidebar-right" style="border:1px solid #c2c2c2;"> 

     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, 
     quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed 
     imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
     et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 

    <div class="span2 offset1" id="sidebar-left" style="border:1px solid #c2c2c2;"> 

     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero, 
     quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed 
     imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae 
     et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum. 

    </div> 
</div>

來源

2012-10-19 18:19:51 zmanc

CSS寬度和列問題

回答

相關問題