当前位置: 首页 > 面试题库 >

如何在纯CSS中创建等高列

高运诚
2023-03-14
问题内容

如何让您的div一路下滑?如何填充父div的垂直空间?如何在不使用背景图像的情况下获得等长的列?

我花了几天时间使用Google搜寻和剖析代码,以了解如何尽可能简单高效地完成等长列。这是我想出的答案,我想在一个小教程中与社区复制和粘贴样式共享此知识。

对于那些认为这是重复的,不是。我受到几个网站的启发,其中包括http://matthewjamestaylor.com/blog/equal-
height-columns-cross-browser-css-no-hacks,但是下面的代码是唯一的。


问题答案:

现代Web设计中棘手的事情之一是创建两个(或更多)列布局,其中所有列的高度均相等。我着手寻找一种在纯CSS中实现此目的的方法。

您可以通过在包含两个列(或页面背景)的wrap-div中使用背景图像来最轻松地完成此操作。

您也可以通过使用CSS表格单元格来完成此操作,但是不幸的是,浏览器对此的支持仍然很差,因此它不是首选的解决方案。继续阅读,有更好的方法。

我从网络上的两个页面中找到了灵感,尽管我更喜欢我的解决方案,因为它给了我更多的自由,可以使用圆角和精确的宽度或百分比布局,并且更容易编辑,最终布局的div不会强迫您做负数运算。

==诀窍:==

首先创建背景设计列,然后放置一个可以容纳常规内容的全宽div。诀窍全都在于列中的浮动列,当内容的长度延长时,无论哪个端列最长,都会在所有父列上产生推入效果。

在此示例中,我将在带有圆角的居中wrap-div中使用2列网格。我试图将绒毛保留下来,以方便复制粘贴。

==步骤1 ==

创建您的基本网页。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>

==步骤2 ==

在另一个浮动div中创建一个浮动div。然后在内部div上应用负边距,以使其视觉上弹出框架。我添加了虚线边框以说明目的。要知道,如果您将外部div浮动到左侧,并将内部div的左边距设为负数,则内部div将位于页面边缘下方,而没有滚动条。

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
    border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
    border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        this content obviously only fits the left column for now.
    </div>
</div>
</body>
</html>

==步骤3 ==

在内部div中:创建一个没有背景的div,将所有列的with组合在一起。它将推入内部div的边缘。我添加了一个虚线边框以说明目的。这将是您内容的画布。

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
    border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
    border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
    float:left;
    width:400px;
    border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        <div id="overbothsides">
            this content spans over both columns now.
        </div>
    </div>
</div>
</body>
</html>

==步骤4 ==

添加您的内容。在此示例中,我将两个div放置在布局上方。我还带走了虚线边框。Presto,就是这样。您可以根据需要使用此代码。

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
}
#overbothsides{
    float:left;
    width:400px;
}
#leftcol{
    float:left;
    width:80px;
    padding: 10px;
}
#rightcol{
    float:left;
    width:280px;
    padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        <div id="overbothsides">
            <div id="leftcol">left column content</div>
            <div id="rightcol">right column content</div>
        </div>
    </div>
</div>
</body>
</html>

==步骤5 ==

为了使它更好,您可以将整个设计放在div居中,并使其圆角。除非您对此进行特殊修复,否则圆角不会在旧版IE中显示。

<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
    position:relative;
    width:500px;
    margin:20px auto;    
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    border-bottom-right-radius: 20px;
}
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
}
#overbothsides{
    float:left;
    width:400px;
}
#leftcol{
    float:left;
    width:80px;
    padding: 10px;
}
#rightcol{
    float:left;
    width:280px;
    padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="rightsideBG">
        <div id="leftsideBG">
            <div id="overbothsides">
                <div id="leftcol">left column content</div>
                <div id="rightcol">right column content</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>


 类似资料:
  • 问题内容: 我想创建一个具有任意大小的div,然后在该div上显示一些内容。完全按照CSS中下面的div定位和调整叠加层大小的最佳方法是什么? 问题答案: 您可以使用将叠加层放置在div内部,然后在各个方向上将其拉伸,如下所示: CSS 已更新* 您只需要确保您的父div为其添加了属性,并为其设置了更低的属性。 为下面的评论者制作了一个可以在所有浏览器(包括IE7 +)上运行的演示。 从CSS中移

  • 问题内容: 在CSS中,我可以执行以下操作: 但我不知道如何将其更改为: CSS有可能吗? 如果是,如何在不显式指定高度的情况下做到这一点(让内容增加)? 问题答案: 弹性盒 假设这种布局: 对于flexbox,等高列只是一个声明: 表格布局 如果仍然需要支持IE 8或9,则必须使用表布局:

  • 问题内容: 我想在CSS表中使用百分比。不幸的是,它对我不起作用。 此代码有什么问题?我应该使用flexbox代替表吗? 我想使用表格,因为我想要相同的高度列。 问题答案: 这是一个使用/ 元素的示例,2列使用百分比,并且具有相等的高度。 由于表格更喜欢表格/行/单元格的布局,因此我对HTML进行了一些重组。

  • 问题内容: 这里要注意的关键是页脚的高度不会固定,而是随其内容而变化。 当我说“粘性页脚”时,我将其理解为“不高于视口底部的页脚,但如果有足够的内容,它将被隐藏,直到用户滚动为止”的通用定义。下降到足以看到它的程度。” 另请注意,我不需要支持旧版浏览器。如果CSS 和相关属性在这里有所帮助,那么它们是公平的游戏。 问题答案: 这里的所有其他解决方案都已过时,并且使用JavaScript或黑客手段。

  • 如何创建如下所示的菜单: 链接到PSD 我不想用PSD图像。我更喜欢使用像FontAwesome这样的软件包中的图标,并在CSS中生成背景/CSS。 使用PSD生成工具提示图像然后使用它的菜单版本可以在这里找到。

  • 问题内容: 我想以编程方式创建由纯色填充的UIImage。有人知道如何在Swift中执行此操作吗? 问题答案: 另一个与 Swift 2.2 兼容的不错的解决方案是以这种方式在UIImage中创建另一个构造函数: 这样,您可以通过以下方式创建自定义彩色图像: 或者,可以选择创建具有自定义尺寸的图像: 斯威夫特3.0