Question

我无法看到我在这里做错了什么。我正在处理三列布局的宽度和边距，我想将右侧边栏加宽到白色空间左边。

但是当我将＃sidebar的宽度增加到22％以上时，两个侧边栏都会下降到内容之下。我错过了与组合宽度和边距有关的东西。

HTML和CSS位于图片下方。这也是一个响应式结构，如果这有所不同。我需要保留这个CSS和HTML，因为它是一个WordPress主题，我不想进入另一种类型的CSS列或框结构。

更新10/23/12 我放弃了尝试调整当前的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;
}

Answer 1

你的问题是#primary的-26.4％右边距和＃sidebar-left的-72％左边距。

我已经调整了那些小提琴;我放弃左侧边栏左边缘（但为了填充而保持1.5％），并将#primary的右边距调整为-100％。

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

这仍然非常糟糕。如果有任何可行的方法，那么你将有更好的经验来重新处理HTML和CSS ..但如果没有，那么这个小提琴将至少允许你在这个现有框架中根据需要重新调整右侧边栏的大小。

更新：我没有可靠的来源，但我可以解释CSS数学。一般来说，你在#primary上使用负边距将其他两个div放在#primary通常占用的区域中。通常情况下，使div重叠的唯一方法是将它们设置为position: fixed或position: absolute。因为那些非常难，所以这样的布局通常可以通过三个左浮动（或将来的flexbox）完成，但是由于HTML的顺序是不可能的。

相反，你被迫说服CSS渲染器#primary不介意被覆盖...你通过设置-100％的负余量来做，基本上说，“在这里，有这一切空间，你可以重叠它。“打开空间后，然后使用左右浮动（和宽度收缩）将侧边栏放在#content两侧的空白处。

我希望有所帮助！

Answer 2

编辑：

我做了一个可能适合你的三栏布局。

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

希望这有帮助。

Answer 3

我认为这个问题具体在这里：

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

保证金：右上角左下;

所以你必须减少右边距让右边栏扩展不要试试。你最好测试它。

Answer 4

使用此代码： -

<强> 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;
}

Answer 5

实际上，你很容易忘记填充增加内容的宽度，所以如果你有3个div，宽度为20％，边距为10％。每侧10％的填充，你将超过你必须移动的100％。

使用JSfiddle here

Answer 6

其他人已经给你解释了。我只想添加可视化表示，以便更容易地看到问题。 The problem area

Answer 7

.three-column #content div是需要保留边距的中间内容#sidebar-left div宽度+填充和边距右#sidebar-right div width + padding，无需修复宽度中间内容。

检查sample和code。

Answer 8

编辑：我没有看到你必须留在同一个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>

CSS宽度和列问题

8 个答案: