Question

考虑一个<div>元素，其中包含可以覆盖多行的各种高度的可变数量的元素。有没有办法为此文本的每一行显示特定图像？ See this example：

HTML：

<div id="bookcase">
  <div class="shelf">

  </div>
</div>

JS：

var bookNumber = 300;
for (var i =0; i<bookNumber;i++) {
    $('#bookcase').prepend($('<span>').css({
    width: (5+20*Math.random()*Math.random()) + 'px',
    height: (300*Math.random()*Math.random()) + 'px'
  }).addClass('book'));
}

CSS：

.book {
  border: 1px solid black;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.shelf {
  width: 100%;
  height: 20px;
  background-image: url("http://sr.photos3.fotosearch.com/bthumb/CSP/CSP994/k15715591.jpg");
}

目标是为每排书架展示架子。为了使代码易于阅读，书籍元素是通过JS生成的，但我宁愿不使用JS来创建shelf元素并仅使用CSS。

我尝试了什么：

在生成书籍元素时，为每一行创建一个<div>子项，其中包含一组书籍+最后的书架图片：它不起作用，因为我需要知道每本书的数量行将有（因为我希望书架占用所有页面宽度），我不提前知道。
background-repeat属性，货架图像垂直重复：它不起作用，因为我事先不知道每行的高度。
JavaScript解决方案，我检测到哪一行无法容纳更多书籍，并在此时添加一个货架图像：这将是我的最后手段：我想要一个纯CSS解决方案。

有没有办法实现这个目标？

Answer 1

现在配置它的方式显然不起作用。这是因为您目前无法在页面上划分您的图书。从这个意义上讲，你只有一个架子。

<div class="bookCase">
<span class="book">
.
.
.
<div class="shelf"></div>
</div>

您可以为每本书添加一个厚底边框（20px左右），以制作一种伪架子。

var bookNumber = 300;

for (var i =0; i<bookNumber;i++) {
	$('#bookcase').prepend($('<span>').css({
  	width: (5+20*Math.random()*Math.random()) + 'px',
  	height: (300*Math.random()*Math.random()) + 'px'
  }).addClass('book'));
}

.book {
  border: 1px solid black;
  border-bottom: 20px solid black;
  display: inline-block;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bookcase"></div>

就个人而言，如果包含的元素改变大小，我会在最后的手段中添加一个“resize”监听器来动态重建你的架子。

如何为多行文本的每一行显示图像？

1 个答案: