将div调整为<p>元素的高度
将div调整为<p>元素的高度
提问于 2012-02-21 05:11:39
我在我的网站上工作，我需要做一些css，让我有一个div从我的主要内容div的侧面伸出，它将自己与p元素对齐，并调整大小以适合产生这样的结果：
http://i.stack.imgur.com/wCYi6.png
如果我想让一个类在图像中生成大量的蓝色div，那么只使用css就可以做到这一点吗？
编辑:我想我问这个的时候不太清楚。我需要一些东西来获取段落的高度和垂直位置，并将其输入到div中
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-02-21 05:19:01
这在CSS中是个问题，但是你可以使用faux columns来达到你想要的效果。
下面是一个简单的demo
.wrap { background:lightblue url(image-width-of-column.png) right repeat-y; min-height:100px; overflow:hidden; width:800px;}
p { width:600px; float:left; }
.sidebar{ float:right; width:200px; }Stack Overflow用户
发布于 2012-02-21 05:40:47
您可以在CSS中使用绝对定位来实现这一点。
http://jsfiddle.net/ya6Eq/
诀窍是对边缘元素使用top:0px和bottom:0px。
CSS
.y {
position: relative;
background: #0F0;
margin-bottom: 10px;
}
.y .x {
background: #F00;
position: absolute;
top:0px;
bottom: 0px;
right: 0px;
width: 80px;
}
HTML
<!DOCTYPE html>
<html>
<body>
<div class='y'>
<p>
I am <br>
two lines tall
</p>
<div class='x'>marginal</div>
</div>
<div class='y'>
<p>
I am <br>
three lines<br>
tall<br>
</p>
<div class='x'>marginal</div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9368460
复制相关文章
相似问题
腾讯云开发者
