这是我试图实现的目标:
与以下HTML
:
<div id="my1">
<p> some text </p>
<div id="wrap">Awesome content</div>
</div>
有这个:
text text text text text text text text text text text text text text
text text text text text div id="wrap" text text text text text
text text text text text text text text text text text text text text
漂浮的div
到目前为止,s 并没有帮助我达到这个结果...(考虑到 my1 和 wrap 的高度和宽度都是已知的)?
一个小提琴,其中文本从被包装的 div 的右侧开始,当我希望它从“my1”div 的左侧开始时,它会在“wrap”div 周围中断。http://jsfiddle.net/matmat/dxV4X/ http://jsfiddle.net/matmat/dxV4X/
看起来你想要类似 float:center 的东西?好吧,问题是这个属性不存在。
这里有两种选择:
1)用伪元素伪造它 -FIDDLE http://jsfiddle.net/danield770/5w5A4/1/- 看这个CSS 技巧文章 http://css-tricks.com/float-center/
像这样设置标记:
<div>
<div id="wrap">Awesome content</div>
<div id="l">
<p>left text here</p>
</div>
<div id="r">
<p>right text here</p>
</div>
</div>
With CSS
#wrap {
width:250px;
height: 250px;
background: yellow;
position: absolute;
top: 0;
left: 50%;
margin-left: -125px;
}
#l {
float: left;
}
#r {
float: right;
}
#l, #r {
width: 49%;
}
#l:before, #r:before {
content:"";
width: 125px;
height: 250px;
}
#l:before {
float: right;
}
#r:before {
float: left;
}
替代方案 #2(仅限 IE 10+):CSS 排除 http://dev.w3.org/csswg/css-exclusions/ - FIDDLE http://jsfiddle.net/danield770/BXnA7/3/
Markup
<div class="container">
<div class="exclusion">Awesome content which floats in the center</div>
<div class="dummy_text">all the text here</div>
</div>
CSS
.container {
font-size: small;
background: aqua;
position: relative;
}
.exclusion {
background-color: lime;
-ms-wrap-flow: both;
-ms-wrap-margin: 10px;
z-index: 1;
position:absolute;
left:0;right:0;
top:0;bottom:0;
width: 150px;
height: 100px;
background: yellow;
margin: auto;
}
有关 CSS 排除浏览器支持和更多资源的更多信息,请参阅我的答案here https://stackoverflow.com/a/19895616/703717.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)