代码之家 › 专栏 › 技术社区 › Jason N. Gaylord

背景和CSS浮动

grid-layout css html

Jason N. Gaylord · 技术社区 · 17 年前

所以我使用了960网格系统,发现了一些他们不支持的东西。我已经考虑过转换到蓝图,但是在这个过程中我必须稍后再回到设计阶段。总之,我简化了我的代码以显示我的体验:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
    .frame { width: 960px; margin-left: auto; margin-right: auto; }
    .column { display: inline; float: left; position: relative; margin: 10px 10px 10px 10px; width: 300px; background-color: silver; }
    #bkg { background-color: blue; }
</style>
</head>

<body>
    <div class="frame" id="bkg">
        <div class="column">Column A</div>
        <div class="column">Column B<div><br/><br/><br/><br/></div></div>
        <div class="column">Column C</div>
    </div>
</body>

</html>

我试图看到背景扩展到所有3列。我能做些什么来扩展背景,使其覆盖所有3列吗?

4 回复 | 直到 17 年前

ndp 17 年前

您可以将帧浮动设置为:

.frame { width: 960px; margin-left: auto; margin-right: auto;float:left}

就这样。或者,您可以在框架中添加一个具有“明确修复”的额外元素。预先制作的960网格为您提供了一个“清除”类:

(css  .clearfix { clear: both } )
<div class="frame"
   ...
<div class="clearfix" /></div>

meder omuraliev 17 年前

只需将此额外规则添加到选择器:

div.frame {
     overflow:hidden;
}

除非框架外有元素,否则不需要依赖clearfix,也不需要依赖clear:both的任何无关标记。

Ken Browning 17 年前

你需要申请 clearfix 类为βBKG。

<div class="frame clearfix" id="bkg">

Bill Turner 17 年前

你要做的是“清除浮动”。有很多选择,一些简单,一些相当复杂。

最简单的方法是在最后一列后面添加一个clearing div,如下所示:

<div class="frame" id="bkg">
  <div class="column">Column A</div>
  <div class="column">Column B<div><br/><br/><br/><br/></div></div>
  <div class="column">Column C</div>
  <div style="clear: both;"></div>
</div>

那应该工作。

以下是一些其他方法(一些纯CSS):

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前