html - CSS宽度和列问题

Question

我看不出我在这里做错了什么。我正在使用三列布局的宽度和边距，我想将右侧边栏扩大到左侧的空白区域。

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

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

2012 年 10 月 23 日更新 我放弃了尝试调整当前的 CSS 和 HTML 并更改为页面模板的框布局模型 CSS，因为框模型运行良好，并且我也能够简化我的页面模板。

有任何想法吗？

在此处输入图像描述

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

score 7 · Accepted Answer

您的问题是#primary 上的-26.4% 右边距和#sidebar-left 上的-72% 左边距。

我用那些调整过的人做了一个小提琴；我删除了侧边栏的左边距（但为了填充而保留了 1.5%），并将#primary 的右边距调整为 -100%。

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

这仍然很糟糕。如果有任何方法可以，您将获得更好的重新处理 HTML 和 CSS 的体验。但如果没有，该小提琴将至少允许您在现有框架内根据需要重新调整右侧边栏的大小。

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

相反，你不得不让 CSS 渲染器相信 #primary 不介意被覆盖……你可以通过设置 -100% 的负边距来做到这一点，基本上是在说，“这里，拥有所有这些空间，它是你可以把它重叠起来。” 打开空间后，您可以使用左右浮动（以及宽度限制）将侧边栏放置在 #content 两侧的空白区域中。

我希望这会有所帮助！

score 0 · Accepted Answer

编辑：

我做了一个可能对你有用的三列布局。

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;

见这篇文章。

希望这可以帮助。

score 0 · Accepted Answer

我认为问题具体在这里：

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

边距：右上左下；

所以你必须减少右边距才能让右侧边栏扩大。
不要尝试。你最好测试一下。

score 0 · Accepted Answer

使用此代码：-

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

score 0 · Accepted Answer

它很容易实际上你非常接近你忘记了填充会增加你的内容的宽度，所以如果你有 3 个 div，每边有 20% 的宽度和 10% 的边距和 10% 的填充，你会得到超过 100% 你必须移动。

在这里工作 JSfiddle

score 0 · Accepted Answer

0

别人已经给你解释过了。我只是想添加视觉表示，以便更容易看到问题。问题区域

于 2012-10-18T16:55:17.007 回答

score 0 · Accepted Answer

.three-column #contentdiv 是中间内容，它需要左边距为#sidebar-leftdiv 宽度 + 填充，右边距为#sidebar-rightdiv 宽度 + 填充，不需要固定中间内容的宽度。

检查示例和代码。

score 0 · Accepted Answer

编辑：我没有看到您必须使用相同的 CSS 的评论。可能除了您当前拥有的之外，还可以使用它，但如果不是，请忽略。

如果您使用 row-fluid 和 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>

html - CSS宽度和列问题

8 回答 8

Related

Reference