css - chalice /右div漂浮在下方-6ren

css - chalice /右div漂浮在下方

转载作者：行者123 更新时间：2023-11-28 15:42:47

31

4

我一直在努力弄清楚我右边的 div 是什么漂浮了。

.header{
	background:red;
	height:100px;
	width:100%;
}

.left{
	background:white;
	float:left;
	height:800px;
	width: 200px;
}

.main{
	background:yellow;
	height: 800px;
	width: 600px;
	overflow: hidden;
}

.right{
	background:white;
	float: right;
	height:800px;
	width: 200px;
	overflow: hidden;
}

.footer{
	background:red;
	height: 100px;
	width:100%;
}

<!doctype html>
<html lang="en"> 
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 
<title>Layout</title> 
<body> 
    <div class="header"></div>
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
    <div class="footer"></div>
</body> 
</html>

有什么指点吗？我知道这看起来很简单，但我画了一个空白

最佳答案

div{
	border: 1px solid #000000;
	margin:3px;
}

.header{
    background:red;
    height:100px;
    width:100%;
}

.left{
    background:white;
    float:left;
    height:800px;
    width: 200px;
}

.main{
    background:yellow;
    height: 800px;
    width: auto;
    overflow: hidden;
}

.right{
    background:white;
    float: right;
    height:800px;
    width: 200px;
    overflow: hidden;
}

.footer{
    background:red;
    height: 100px;
    width:100%;
}

    <div class="header">header</div>
    <div style="clear:both;"></div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
    <div style="clear:both;"></div>
    <div class="footer">footer</div>

正确的做法是:

首先放置 float 元素(左 - 右)而不是非 float 元素(主要)

同时确保你在 float 后清除(“clear:both”)

ps 我给出了主要的“with:auto”但不是必需的...只是更兼容

    <div class="header">header</div>
    <div style="clear:both;"></div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="main">main</div>
    <div style="clear:both;"></div>
    <div class="footer">footer</div>

关于css - chalice /右div漂浮在下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29214607/

31

4

0

文章推荐： html - 堆放 div 的盒子？

文章推荐： html - 使用基础时隐藏属性不起作用

文章推荐： html - 如何更改 CSS 的优先行为以停止覆盖 css 类？

html - CSS 流体列，固定边距； chalice 的 chalice
更新与总结我觉得有义务让这个问题更清楚，现在有悬赏。 (另外，我很确定当 calc() CSS3 单位值被支持时，这将是 child 的游戏，做类似 width: calc(25% - 5px) 的
chalice 。调用保存后id为空
我已经对此进行了搜索，但仍然无法弄清楚我做错了什么。调用save()后域对象 id是 null . 我已经阅读了如果保存对象时出现问题会发生这种情况，并且 save(flush:true)如果是这种情
chalice 日期选择器
我正在使用 g:datePicker name="date1"id="date1"value="${program?.startDate}"> 在 Controller 中，当使用 params.da
chalice 。如何使用嵌套列表保存实体？
有以下实体: class Letter { String email String subject String content List attac
chalice 。将只读集合存储在变量中
更新。检查这些 benchmarks自己测试一下。我是否应该将对象集合存储在某些服务的变量中，如下所示: ConfigService{ private def countries = Coun
chalice : Difference between\${} and ${}
谁能告诉我: 和在“$”之前使用“\”的真实例子是: 谢谢。最佳答案 \${...} 会将文字美元大括号放入输出中，而不是将内容作为表达式求值。我很少需要在普通 GSP 中使用它，但它在脚手
chalice 。域类及其方法？
例如，我在书中读到，如果我们创建关系 1:m，Grails 会自动添加方法 addTo* 和 removeTo* 现在我想，我如何才能看到我的域类的所有方法？例如，有些像这样:Domain.getA
validation - chalice 验证已经保存到数据库的数据
我有这个非常复杂的表格。必须填写所有字段，但可以保存填充过程并继续进行。所以我需要的是，当最终确认被按下时，所有数据都会得到验证。但是因为它已经保存到数据库，所以调用validate()无效。我通过加
chalice war 和部署
我在 windows xp 和 centos 上使用 grails 1.3.4。 centos上的Tomcat 5。我在一个应用程序(以及我放在一起的测试应用程序)上进行了“grails dev w
chalice : data binding
我正在尝试从 xml 创建一些域对象。 class A { String name } class B { A a int something } 我首先创建了一个 A 的实例，然后刷新。
grails - 脚本库 chalice
我有一个标准的 GSP，我正在尝试包含 scriptaculous ajax 搜索。 Search Entry Search
Spring / chalice ；属性编辑器究竟是如何使用的？
在我看到的文章中，作者似乎只是在讨论创建自定义属性编辑器并注册它们。我如何实际使用它们？它们是否仅在数据绑定(bind)期间自动使用？最佳答案属性编辑器在数据绑定(bind)期间自动使用，但 da
chalice 未能建立 war
有人以前见过这个问题吗？这是什么原因？ Error executing script War: loader constraint violation in interface itable init
python - chalice 中缺少公钥文件
我正在与 chalice 一起工作 Chalice (编写python rest api)和cashfree sdk Cashfree SDK (转账)。我有一个 public_key.pem 文件
python - chalice 包装问题
我正在玩弄 Chalice这是我第一次尝试将其评估为可能的替代框架，以将我现有的 Python Flask API 从 EC2 迁移到 Lambda。我从一个 Amazon Linux EC2 实例
html - chalice 。如何向我的数据库发送请求也可以看到更改
如何向我的数据库 mySql 发送请求，然后检查是否有更改，以便在有更改时可以刷新 div？ -编辑- 这是我的代码。它只是每 5 秒自动刷新一次加载函数，以便将新的更改应用到表中。我不知道如何向我的
css - chalice /右div漂浮在下方
我一直在努力弄清楚我右边的 div 是什么漂浮了。 .header{ background:red; height:100px; width:100%; } .left{ background:whi
chalice g :select tag
我正在使用这样的 g:select 标签: 它呈现以下 HTML: Select City... A B C- D 但是，我希望我的 HTML 看起来像这样；因为我正在做一些 javasc
chalice : Generating PDF from GSP
我的 GSP 页面有多个表格以及一些其他 HTML 元素，例如输入文本字段和标题文本。我希望在生成的文本中捕获所有这些信息。到目前为止，我所看到的示例仅适用于生成一张表。是否有一种从 GSP
workflow - Plone 工作流程的 chalice
我们正在实现 Plone CMS 作为 ISO9001 文档的存储库。 ISO 要求一定量的日志记录，任何熟悉该标准的人都可能知道:-) 为了灵 active ，我们希望合并(不按特定顺序): 新内容

首页

博学

6Ren·AI

商城

css - chalice /右div漂浮在下方