具有固定元素并填充有其他元素的页面
Page with fixed elements and filled with others?
我想用一些固定中心的元素构建一个页面,这些元素包围着所有可用空间(取决于浏览器的宽度)。
下面是一个线框来说明它:http://s23.postimg.org/pm61hyam3/Sans_titre_6.jpg
CSS3,JS。。。有办法做到这一点吗?
谢谢你的帮助!
解决方案#1
我认为未来解决这个问题的方法将是使用CSS Exclusions。
在IE10中查看此小提琴+
CSS Exclusions以前扩展了内容包装的概念仅限于浮动。。。元素在其内容区域中布局其内联内容,并在其关联的包装上下文中包装排除区域(--规范摘录)
这篇msdn文章还解释了排除
web作者现在可以包装文本,使其完全围绕元素,从而避免了浮动的传统限制。而不是限制元素向左或向右浮动相对于它们在文档流中的位置,CSS Exclusions可以是位于距顶部、底部、左侧或包含块的右侧,而文档流。
具有讽刺意味的是,到目前为止,这只适用于IE10(寻找包裹流:两者都在这里)
这就是代码的样子:
<div class="container">
<div class="exclusion1"></div>
<div class="exclusion2"></div>
<div class="dummy_text">
text here
</div>
</div>
CSS
.exclusion1, .exclusion2
{
-ms-wrap-flow: both;
-ms-wrap-margin: 10px;
z-index: 1;
position:absolute;
left:0;
right:0;
top:0;
bottom: 0;
margin: auto;
}
.exclusion1
{
width: 150px;
height: 150px;
background: yellow;
}
.exclusion2
{
width: 250px;
height: 50px;
background: blue;
margin-top: 320px;
}
解决方案#2
CSS技巧文章用伪元素伪造"float:center"应该会有所帮助。
FIDDLE
标记
<div id="page-wrap">
<img src="http://placekitten.com/250/250" id="logo">
<div id="l">
<p>left column text</p>
</div>
<div id="r">
<p>right column text</p>
</div>
</div>
CSS
#logo {
position: absolute;
top: 0;
left: 50%;
margin-left: -125px;
}
#l, #r {
width: 49%;
}
#l:before, #r:before {
content: "";
width: 125px;
height: 250px;
}
#l {
float: left;
}
#l:before {
float: right;
}
#r {
float: right;
}
#r:before {
float: left;
}
相关文章:
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- 如何在不影响其他元素的情况下扩展DIV
- 单击其他元素时,我如何使用 jQuery 忽略更改事件
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 从其他元素上的单击事件访问image src属性
- 如何'剪切'DOM元素并将其显示在其他位置
- jQuery悬停动画只在其他类似元素中的一个元素上
- 基本D3.js:如何将具有其他属性的数据绑定到元素
- 单击其他元素或鼠标向上时隐藏输入框,但保留一次焦点
- 将一个元素放在具有相同z索引的其他元素前面
- 将href中的图像替换为其他元素中的图像
- JavaScript删除所有其他元素
- AngularJS:根据其他对象预先选择ng repeat中的select元素
- 为数组元素的属性赋值将设置所有其他类似元素的属性
- 如何使用其他自定义指令中的元素标记作为另一个自定义指令的模板
- stopPropagation是否还会阻止同一元素上的其他处理程序运行
- 如何在 *ngFor 列表中显示单击的元素,使用 Angular 2 隐藏其他元素
- 单击更改其他元素源
- 有没有办法将选择器返回到元素?是$(这个)还是其他方法
- 从异步调用返回数组,然后为数组的每个元素返回其他异步调用