个人中心
gpt4 book ai didi

CSS Holy Grail(液体主要，固定权利)，添加的 DIV 不扩展少量内容？

转载 作者：行者123 更新时间：2023-11-28 13:39:03 24 4
gpt4 key购买 nike

我将 A List Apart 的“ chalice ”用于具有固定右列的液体主列(他们的列也显示左列，但我已将其删除)。我在主栏区域和右栏区域添加了 DIV，这些额外的 DIV 有边框(这也有助于我们查看 DIV 的尺寸)。

当我的主栏中的 DIV 包含大量内容时，它会强制 DIV 扩展到右栏前 10 像素的点(这是我希望它的行为方式)。

当我的主栏中的 DIV 包含少量内容时，DIV 环绕内容并且不会延伸到右栏前 10 px 的点。我希望它延长。我尝试添加宽度:100%，但这会导致 DIV 过度扩展。我想避免使用 99% 之类的东西。关于如何实现这一点有什么想法吗？我的 HTML 和 CSS 在下面。

    <html><head>
    <style>
    body {min-width: 400px;         /* 2 x RC fullwidth */}
    #container {padding-right: 177px;     /* RC fullwidth + CC padding */}
    #container .column { /* position: relative; */ float: left;}
    #container .maintry1 { /* position: relative; float: left; */ padding:10px; border: 1px solid #cbcbcb; background-color:#fff;}
    #container .maintry2 { /* width:100%; position: relative; float: left; */ padding:10px; border: 1px solid #cbcbcb; background-color:#fff;}
    #container .rightnav { /* position: relative; float: left; */ padding-left:10px; padding-right:10px; padding-top:0px; padding-bottom:0px; border: 1px solid #cbcbcb; background-color:#fff;}
    #center { padding: 10px 10px; /* CC padding */ width: 100%;}
    #right {width: 147px;             /* RC width */
        padding: 10px 10px 10px 0px;          /* RC padding */
        margin-right: -100%;
    }
    #footer {clear: both;}
    /*** IE Fix ***/
    * html #left {left: 150px;              /* RC fullwidth */}
    /*** Just for Looks ***/
    body {margin: 0; padding: 0; font: 14px Arial, Helvetica, sans-serif; background-color: #f6f6f6; color: #000; margin:0; padding:0;}
    #center {background-color: #f6f6f6;}
    #right {background-color: #f6f6f6;}
    #container .column {background-color: #f6f6f6;}

    #Group1 { display:inline-block; width:33%; background-color:#ff0000;}
    #Group2 { display:inline-block; width:33%; background-color:#00ff00;}
    #Group3 { display:inline-block; width:33%; background-color:#0000ff;}
    </style>
    </head>
    <body>
    <div id="container">
        <div id="center" class="column">
            <div class="maintry1">
            <p>#1. This DIV has a large amount of content and forces the DIV to encompass the intended area.<br>
            test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>

            <div id="Group1">
                <ul>
                <li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li><li>test</li>
                </ul>
            </div>
            <div id="Group2">
                <ul><li>test</li></ul>
            </div>
            <div id="Group3">
            <ul><li>test</li></ul>
            </div>

            </div>      
            <br>
            <div class="maintry1">
            <p>#2. This DIV has a small amount of content.<br> The DIV does not extend to the end of the intended area like the 1st DIV.<br> How can I get this DIV to go expand to the right with the intended 10px padding?</p>
            </div>
            <br>
            <div class="maintry2">
            <p>#3. This is the same as #2, but it has width:100% and it extends too far.</p>
            </div>
        </div>
        <div id="right" class="column">
            <div class="rightnav">
            <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
            </div>
        </div>
    </div>
    </body>
    </html>

更新:这是与我在 2011 年 12 月 12 日的评论相关的 2 个快照:

旧的: enter image description here

我的修复？ enter image description here

2011 年 12 月 13 日更新

嗨咕噜，

非常感谢您的跟进。该代码很有帮助。另外，盒子模型对我的理解很有帮助。例如，我想关闭颜色，并在某些 DIV 上打开 border-left，这似乎违反了添加到 100% 的规则。当有组 DIV，我将每个 DIV 设置为 33.33%，然后我有两个边框为 1px(99.99% + 2 像素)的 DIV，这似乎也超过了 100%。当我设置为33%时，根据我的屏幕大小，目前似乎还可以，但这似乎不太科学。那里有挤压我的边界的首选方法吗？我将针对 3、5、8 和 12 列(可能更多)对此进行不同的迭代，因此边界将开始加起来并可能产生影响。我希望 wrapper 尽可能接近 100%。我已经更新了 fiddle :

http://jsfiddle.net/zenfiddle/yUPCC/2/

此外，也许这适用于另一个问题，但也许我们可以在这里处理一个快速修复。我更新的 Fiddle 将边界显示为停在 DIV 环绕的地方。我希望边框跨越父 DIV 的高度。我意识到有很多方法可以解决这个问题，不同的作者/开发人员已经讨论过这个问题。有快速而可靠的修复方法吗？无论我采用什么方法，我都会为第 3、5、8 和 12 列重新计算它。

最佳答案

你可以试试这个:

#container .column {
    /*position: relative;*/
    float: left;
}
#container .maintry1 {
    /*position: relative;
    float: left;*/
    padding: 10px;
    border: 1px solid #cbcbcb;
    background-color: #fff;
}
#container .maintry2 {
    /*width: 100%;
    position: relative;
    float: left;*/
    padding: 10px;
    border: 1px solid #cbcbcb;
    background-color: #fff;
}
#container .rightnav {
    /*position: relative;
    float: left;*/
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    border: 1px solid #cbcbcb;
    background-color: #fff;
}

css规则我注释掉了，你可以删除，应该有你想要的效果。

当你设置一个 float:left;到 .column 你不必在其中 float div。默认情况下，div 显示为 display:block，因此它们会自动采用 100% 的宽度。

另见此处: http://jsfiddle.net/Fwta6/3/

更新 (13.12.2011)

我会用同样的方法来做，将 3 个 div 向左浮动，以便它们显示在一行中。我更新了代码:http://jsfiddle.net/yUPCC/

让我们把它拆开。

* {
    margin:0;
    padding:0;
}

我删除了主体的最小宽度。当#Groups有一个最小宽度和 .rightnav固定宽度，将最小宽度设置为 body 是没有意义的这甚至比来自 #Groups 的那个还要小

body {
    font:14px Arial, Helvetica, sans-serif;
    background-color:#f6f6f6;
    color:#000;
}

.column {
    float:left;
    background-color:#f6f6f6;
    padding: 10px;
}

.rightnav {
    border:1px solid #cbcbcb;
    background-color:#fff;
    padding: 10px;
}

#center {
    width:100%;
    background-color:#f6f6f6;
    padding:10px; 
}

#right {
    width:147px;
    margin-right:-100%;
    background-color:#f6f6f6;
    padding:10px; 
}

我经常使用 overflow:hidden而不是 float:none或 clear:both .您必须将它添加到包含 float 元素的元素中。这样，您也避免了您提到的“不足/溢出”。 MiG 在这个问题的另一个答案中解释的是一样的。

#Groups {
    overflow:hidden;
    min-width:600px;
    width:100%;
}

而不是添加 float:left #Groups 中的每一个 div您可以通过以下方式解决这些问题。

#Groups div {
    float: left;
    width: 33%;
}

如果您在 #Groups 中为彩色 div 设置填充，它们不会显示内联，因为盒子模型 (http://www.w3schools.com/css/css_boxmodel.asp)。它会简单地计算 33% + 10px，如果乘以 3 则大于 100%。这就是为什么您可以为子元素(在本例中为 ul)设置边距以获得“填充”。

#Groups ul {margin: 10px; }
#Group1 { background-color:red; }
#Group2 { background-color:#0f0; }
#Group3 { background-color:#00f; }

我删除了 <br />在 div 之间设置一个 margin-bottom到 div。

.maintry1,
.maintry2 {
    border:1px solid #cbcbcb;
    background-color:#fff;
    padding: 10px;
    margin-bottom: 10px;
}

希望这就是你想要的样子。我不知道这是否是最佳实践 css，但它有效，这就是我们想要的。

关于CSS Holy Grail(液体主要，固定权利)，添加的 DIV 不扩展少量内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8464788/

24 4 0
文章推荐： Javascript - 使用 foreach 并在鼠标悬停时更改图像
文章推荐： css - 将响应式幻灯片居中
文章推荐： javascript - 正则表达式尝试匹配符号之前和之后的字符
文章推荐： php - 样式帖子的数量可能会有所不同？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com