Question

我正在我的网站上工作，我需要制作一些CSS，允许我从主要内容div的一侧伸出一个div，它与p元素对齐并调整大小以适应生成这样的结果：
http://i.stack.imgur.com/wCYi6.png
如果我想让一个类在图像中制作很多蓝色div，可以只使用css吗？

编辑：我想我在问这个问题时并不清楚。我需要一些能够获得段落高度和垂直位置的东西并将其输入div

Answer 1

这是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; }

Answer 2

你可以通过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>

让div调整大小到<p>元素的高度</p>

2 个答案: