个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
24
4
我有一些嵌套的 div:
<div id="wrapper">
<div id="header">
<!-- a bunch of float divs here -->
</div>
<div id="body">
<div id="content">
<!-- a bunch of html controls here -->
</div>
</div>
</div>
宽度:780px；利润:
20px 自动；边框:纯黑 5px;position:relative；
最小高度:125px;position: relative;position:absolute；
左:50px；顶部:0px;我在内容 div 中有一堆 html 元素，由于某种原因，主体 div 和包装器 div 在标题周围折叠，如果我没有为它设置固定高度，内容 div 会自行挂起 body 部分我仅有的 float 元素在标题中。
编辑:
如果我删除内容 div(并将 html 元素直接放入 body 中)，body div 将停止折叠!试图理解原因 - 猜测是由于位置:内容 div 的绝对值。
知道为什么会发生这种情况以及如何解决吗？
我看过this question但它似乎对我不起作用(或者我在错误的地方清理...)。
最佳答案
在这种情况下你真的不需要使用绝对或相对定位。
以下内容通过最少的 CSS 调整实现了您的需求。
颜色，因为我喜欢颜色，你也应该喜欢!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
#wrapper {
width: 780px;
margin: 20px auto;
border: solid black 5px;
}
#header {
min-height: 125px;
overflow:hidden;
}
#body {
background-color:red;
}
#content {
margin-left: 50px;
margin-top: 0px;
background-color:pink;
}
.floatie { float:left; width:40px; height :40px;
margin:5px; background-color:#fe0;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
<div class="floatie"></div>
</div>
<div id="body">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</body>
</html>
关于html - div在标题周围折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/600890/
24
4
0
我目前有一堆看起来像这样的行: txt = "Can't print the value for "+arguments[1]+" before it's set"; 我在做 $('#mydiv').
我有一个网站，我试图以移动格式显示，但在宽屏幕上显示。我确信 iframe 是要走的路。 我正在尝试将 iframe 加载到 iPhone 的图像中。你可以看到一个例子 here . 一旦你看到它，你
我正在尝试使用 Xcode 中的 Storyboard创建如下所示的 View 。 为此，我添加了一个按钮和一个带有约束的标签，但这就是我得到的结果。文本不会从复选框下方开始。实现此目的的一种方法是创
我正在与 css 斗争以将文本包装在 div 中。我应用了空格、分词但没有任何反应。 链接 http://fiduciaryconsulting.org/index.php/services/90-s
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
正如标题所说 - 如何将文本环绕在伪元素周围？请参见下面的示例: .area { position: relative; } .area:before { content: '';
每次我尝试在 CSS 中做一些看似简单的事情时，它都行不通。 我有一个包含 460x160 图像的内容 div。我想做的就是将图片放在右下角，然后用文字环绕它。 text text
每次我尝试在 CSS 中做一些看似简单的事情时，它都行不通。 我有一个包含 460x160 图像的内容 div。我想做的就是将图片放在右下角，然后用文字环绕它。 text text
我有一个流式布局，它已经为我工作了一段时间。我漂浮 不是右就是左。一个 div 通常会有一个图像和一个标题。 文本项正确地环绕在 float 周围。但是某些元素没有: 将做以下两件事之一:他们要么侵入
这是我的问题。我在另一个 div 中有内联 block div。 .timeEvents { width: 100%; overflow: hidden; text-align: cent
使用float，我可以让文本环绕figure标签中的图像，而不是环绕figcaption标签，因为出色地。将 float 添加到 figcaption 不会这样做。有什么建议吗？ 下面的代码在这里:h
如何让 div 2 环绕 div 1 ？ (两个 div 都包含文本) +---++------------------+ | || | | 1 ||
我有一个场景，我需要转换一个可以被 *this 链接的函数返回 std::optional>而不是 T& (原因超出了这个问题的范围)。我使用 std::reference_wrapper 的原因是因
我想我彻底搜索了这个网站，但找不到我的问题的答案；我也认为这很简单，但是经过几个小时的困惑之后，我已经放弃并决定寻求帮助...... 这是我的问题；我有一个 DIV，里面有两个 DIV；第一个 DIV
我有一个文本区域字段，其右上角有一个 div 框。我进行了广泛的搜索，但找不到一种方法可以让输入文本区域的文本环绕 div。 #wrapper { position: relative; wi
所以我在使用 FancyBox 时遇到了这个问题，当滚动页面主体(主页)时，框会随机向左和顶部移动位置。 附上 GIF 演示问题: 据我所知，我正在使用 Fancybox v2。 网址是here (在
我的 coinslider 周围有一个容器 div。我想围绕这个容器 div 包装文本。如何实现这一目标？ 现在我的 HTML 设置如下: 我的 CSS 是这样设置的: #mycontain
每次我尝试在 CSS 中做一些看似简单的事情时，它都行不通。 我有一个包含 460x160 图像的内容 div。我想做的就是将图片放在右下角，然后用文字环绕它。 text text
我有一个名为“content”的 DIV，其中我有一个图像作为边框/框架，我想绕过它。我都有一个大的整个框架(左、右、上、下)，它与它应该的宽度相匹配，而且我把它切碎了，所以我有四个单边框图像(lef
我正在使用 fieldset 在 div 周围创建带标题的边框。 这是代码: Sproc Details:
我是一名优秀的程序员,十分优秀！