个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
27
4
我正在尝试构建一个在页面中间有三个 float 列的网站。我有一个容器包裹着所有东西，但它不会完全拉伸(stretch)。我做错了什么吗？
谢谢
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
#container
{
background-color:#CCC;
min-height:100%;
}
#header
{
background-color: #000;
width:100%;
float:left;
}
#navbar
{
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper
{
background-color:#000;
height: 175px;
}
#colone
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo
{
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree
{
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
#footer
{
}
最佳答案
您需要clear你的 float 。这是它的样子。
<div id="container">
<div id="header">
<div id="navbar"></div>
</div>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
<div id="footer">This is the footer</div>
</div>
#container {
background-color:#CCC;
min-height:100%;
}
#header {
background-color: #000;
width:100%;
float:left;
}
#navbar {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
#colone {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#coltwo {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
#colthree {
background-color:#FFF;
float:left;
margin-left: 15px;
margin-top:-20px;
height:150px;
}
.clear
{
clear:both;
}
#footer {
}
如果您不介意，我将给您一些关于如何改进您的代码的建议。
首先，您使用的是 HTML5，但没有使用某些新元素。让我们替换它们。
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div id="colone">This is column one</div>
<div id="coltwo">This is column two</div>
<div id="colthree">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
您还在为所有内容使用 ID。相信我，你不想那样做。实际上，您应该谨慎使用 ID。我现在只在需要使用 javascript 定位某些内容时才使用 id。
<header>
<nav></nav>
</header>
<main>
<div id="topper">This is the Topper</div>
<div class="column">This is column one</div>
<div class="column">This is column two</div>
<div class="column">This is colum three</div>
<div class="clear"></div>
</main>
<footer>This is the footer</footer>
这是你的新 css 的样子。
body {
background-color:#CCC;
min-height:100%;
}
header {
background-color: #000;
width:100%;
float:left;
}
nav {
background-color: #FFF;
border-radius: 10px;
height:75px;
width:70%;
margin: 0 auto;
margin-top:10px;
margin-bottom:10px;
border-radius:10px;
}
#topper {
background-color:#000;
height: 175px;
}
.column {
background-color:#FFF;
float:left;
margin-left:15px;
margin-top:-20px;
height:150px;
}
.clear {
clear:both;
}
我留下了 #topper 因为它不寻常。我很难准确地说出你想用它实现什么。
这是 fiddle一切都在一起。
关于html - CSS 布局不扩展包装器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23517942/
27
4
0
正在尝试创建一个 python 包。似乎有效，但我收到警告。我的 setup.py 是: #! /usr/bin/env python from distutils.core import setup
我导入了一个数据类型 X ，定义为 data X a = X a 在本地，我定义了一个通用量化的数据类型，Y type Y = forall a. X a 现在我需要定义两个函数， toY 和 fro
我似乎无法让编译器让我包装 Tokio AsyncRead: use std::io::Result; use core::pin::Pin; use core::task::{Context, Po
我有两个函数“a”和“b”。当用户上传文件时，“b”被调用。 “b”重命名文件并返回新文件名。之后应该编辑该文件。像这样: def a(): edits file def b(): r
我使用 Entity Framework 作为我的 ORM，我的每个类都实现了一个接口(interface)，该接口(interface)基本上表示表结构(每个字段一个只读属性)。这些接口(inter
有没有办法打开一个程序，通常会打开一个新的jframe，进入一个现有的jframe？ 这里是解释，我下载了一个java游戏，其中一个是反射游戏，它在一个jframe中打开，框架内有一堆子面板，我想要做
我想要下面的布局 | AA BBBBBBB | 除非没有足够的空间，在这种情况下 | AA | | BBBBBBB | 在这种情况下，A 是复选框，B 是复选框旁边的 Text
我正在尝试以不同的方式包装我的网站，以便将背景分为 2 部分。灰色部分是主要背景，还有白色部分，它较小并包装主要内容。 基本上我想要this看起来像this . 我不太确定如何添加图像来创建阴影效果，
我正在使用 : 读取整数文件 int len = (int)(new File(file).length()); FileInputStream fis = new FileInputStream(f
我使用 maven 和 OpenJDK 1.8 打包了一个 JavaFX 应用程序我的 pom.xml 中的相关部分: maven-assembly-plugin
我正在使用两个不同的 ItemsControl 来生成一个按钮列表。
我有一个情况，有一个变量会很方便，to , 可以是 TimerOutput或 nothing .我有兴趣提供一个采用与 @timeit 相同参数的宏来自 TimerOutputs(例如 @timeit
我正在尝试包装一个名为 content 的 div与另一个具有不同背景的 div。 但是，当将“margin-top”与 content 一起使用时div，似乎包装 DIV 获得了边距顶部而不是 co
文档不清楚，它似乎允许包装 dll 和 csproj 以在 Asp.Net Core 5 应用程序中使用。它是否允许您在 .Net Core 5 网站中使用针对 .Net Framework 4.6
我被要求开发一个层，该层将充当通用总线，而不直接引用 NServiceBus。到目前为止，由于支持不引人注目的消息，这并不太难。除了现在，我被要求为 IHandleMessages 提供我们自己的定义
我正在尝试包装 getServersideProps使用身份验证处理程序函数，但不断收到此错误:TypeError: getServerSideProps is not a function我的包装看
我有一个项目，它在特定位置(不是/src/resources)包含资源(模板文件)。我希望在运行 package-bin 时将这些资源打包。 我看到了 package-options 和 packag
我正在寻找打印从一系列对象中绘制的 div。我可以通过使用下面的管道语法来实现这一点。 each i, key in faq if (key == 0) |
我在 Meteor.js“main.js - Server”中有这个方法。 Meteor.methods({ messageSent: function (message) { var a
我注意到，如果我的自定义Polymer 1.x元素的宽度比纸张输入元素上的验证错误消息的宽度窄，那么错误将超出自定义元素的右边界。参见下图: 有没有一种机制可以防止溢出，例如在到达自定义元素的边界时自
我是一名优秀的程序员,十分优秀！