个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我已经研究这个问题一段时间了，我很确定它无法解决。只是想我会把它扔出去看看是否有人比我更聪明(不改变标记!:)
下面的布局是一个典型的基于 css 的无表格设计，页眉和页脚使用 float 和相对定位夹在两列(内容和侧边栏)之间。
这个特殊的布局是一个 WordPress 主题，我已经围绕它设计了数十个仅使用 CSS 和图像的网站。这就是为什么我的要求是标记保持原样。
我希望“avatar”div 保持锚定在标题 div 的顶部，而不管“featured”的高度如何，并且不使用“position:fixed”或更改标记顺序。如果您复制下面的代码并将其另存为 .html 文件，您会发现它可以直接使用。但是，一旦您从“特色”中添加或减去高度，“头像”将相应地向上或向下移动。这就是挑战，无论“特色”的尺寸如何，我都需要头像保持相对于 body 的零位置。
将“侧边栏”设置为绝对定位是显而易见的解决方案，但是，它的缺点是它会搞砸内容和侧边栏(以较高者为准)下方的页脚 div 的流动。
我认为答案可能在于表格显示属性之一(因为这实际上是在侧边栏之外创建一个未合并的单元格并设置其相对于其父容器的上边距)，但这是 css 的一个区域我基本上一个人呆着。
<!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" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
body {margin:0;padding:0;}
.header {height:100px; background:red; width:977px; margin:0 auto;}
.main {width:977px; margin:0 auto;}
.featured {background:green;height:50px;}
.content {float:left; min-height:300px; border:1px solid #777; width:700px;}
.sidebar {background:blue; width:250px; float:right; min-height:400px}
.footer {background:gold;height:100px;clear:both;width:977px; margin:0 auto;}
.clear {clear:both;}
.avatar { width:200px; background:orange; margin-top:-150px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
<div class="sidebar">
<div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div>This content should flow below avatar relative to avatar's height</div>
</div>
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div>
</div>
</body>
</html>
最佳答案
试试这个:
<!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" dir="ltr" lang="en-US">
<head>
<title>CSS Float Challenge</title>
<style>
*{margin:0;padding:0;}
body{margin:0;padding:0;}
.wrapper{width:977px;margin:0 auto;}
.header{height:100px;background:red;}
.leftColumn{float:left;width:700px;}
.featured{background:green;height:50px;}
.content {min-height:300px;border:1px solid #777;}
.sidebar {background:blue;width:250px;float:left;margin-left:27px;min-height:400px}
.avatar {width:200px; background:orange;margin-top:-100px;}
.clear {clear:both;}
.footer{background:gold;height:100px;clear:both;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="leftColumn">
<div class="featured">featured content goes here</div>
<div class="content">content goes here</div>
</div><!--.leftColumn-->
<div class="sidebar">
<div class="avatar">avatar goes here. I need this to always be at the top of the screen, <b>regardless of the height of the "featured content" div</b>. Its set at 50px now and avatar rests neatly at the top. However, set it to 100 and watch avatar drop 50 (as expected with the current css)</div>
<div>This content should flow below avatar relative to avatar's height</div>
</div><!--.sidebar-->
<div class="clear"> </div>
<div class="footer">footer is here</div>
</div><!--.main-->
</div><!--.wrapper-->
</body>
</html>
关于css - 不可能的 CSS 布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3809408/
25
4
0
这很可能是我的语法错误，因为我对在 C++ 中使用多个文件和结构(特别是将结构传递给函数)还很陌生。这是三个文件: 主要.cpp: #include #include #include #inc
我有 TypeScript NestJS 项目。 我需要验证传入的 DTO 到我的 API。它可以被描述为“创建项目”，其中我们有建筑类型(房屋、公寓、花园)，并根据该类型我们需要定义: 房屋:楼层包
是否可以从可用于泛型参数的可能类型集中排除特定类型？如果是如何。 例如 Foo() : where T != bool 将意味着除了类型 bool 之外的任何类型。 编辑 为什么？ 以下代码是我尝试强
我的 WebGL 体积光线转换应用程序即将完成。但是我发现了一个问题。我必须通过 2D 纹理模拟 3D 纹理。这不是问题。我正在用小切片创建一个巨大的纹理。巨大纹理的尺寸约为 4096x4096 像素
我正在处理的网页上显示了一个返回顶部按钮。当您向下滚动时，有时单击它时，它会跳到顶部，然后跳回您在页面上的位置，然后像预期的那样平滑滚动到顶部。请记住，它并不总是这样做。这只是一个滞后或故障问题还是我
我对此还很陌生，所以请耐心等待。 我有一个类，它具有三个属性:几个整数和一个用户定义对象的集合。 public class Response { public int num1 { get;
我正在制作一款平台游戏，让玩家每 30 毫秒跳跃一次，并向上添加少量的力。我想我应该使用多线程，因为我之前已经做过一些，而且看起来很简单。无论如何，我尝试了这个: public void jump()
是否可以从可能的类型集中排除特定类型，这些类型可以在泛型参数中使用？如果是这样的话。 例如 Foo() : where T != bool 表示除 bool 类型之外的任何类型。 编辑 为什么？ 以下
我正在尝试在单个查询中实现内部和外部联接，我不确定我的做法是正确还是错误，因为我不太擅长查询。 就这样吧。 我有以下表格。 hrs_residentials hrs_residential_utili
关于 my website ，有一段代码可以向页面添加几个元素。这段代码不是我可以编辑的东西，而且我对它放置这些元素的位置不满意，因为它弄乱了我的一些布局。所以我想出了一个小的 jQuery 来将它们
一位客户希望我创建一个数据集，如下所示。我不知道这是否可能或合乎逻辑。 我有表parent: id name ------- ------- 1 parent1 2
这可能吗？google 好像没有这方面的资料.. 这样，如果用户在另一个网站上播放视频或歌曲，我的音量就会自动减小 最佳答案 不，这是不可能的。 如果可能的话，它必须是特定于浏览器的，但我不认为这种情
所以我正在尝试制作响应式页面。问题是为什么它归结为移动数据需要位于列表中。 我会用一些示例代码来解释 所以这可能是桌面上的输出 option1
当您将鼠标悬停在a 元素 上时，是否可以删除url？ 这就是我的意思: 最佳答案 一种选择是使用一些 JavaScript。 删除 href=来自 的属性标签，取而代之的是 onclick=...
我已经考虑了几个小时，但我无法取得太大进展。它是这样的: You have an array of size n and q queries. Each query is of the form (l
我一直在尝试编写一个脚本来强化 android。我没有成功! 我正在通过模拟器运行一个 AVD，并且已经用我加载的 android shell 和 bash shell 试过了。正如您将在下面看到的那
Private Sub Workbook_Open() Dim WBname As String WBname = ThisWorkbook.name If Not InStr(WBname, "te
Spark 2.0.0-预览版 我们有一个应用程序使用了相当大的广播变量。我们在大型 EC2 实例上运行它，因此部署处于客户端模式。广播变量是一个巨大的 Map[String, Array[Strin
我正在尝试从此link中提取摘要。但是，我无法仅提取摘要的内容。到目前为止，这是我完成的工作： url <- "http://www.scielo.br/scielo.php?script=sci_a
我的主页中有一个iframe。 iframe页面中有一个modalpopup。因此，当显示modalpopup时，modalpopup的父级是iframe主体和主页父级主体。因此，覆盖层仅覆盖ifra
我是一名优秀的程序员,十分优秀！