html - 书籍封面图像旁边的章节列表

Question

我需要一些格式方面的帮助。我不确定如何去做我想做的事。基本上，我有一本书的图片，在它的右边我想列出它的章节。

现在，我的图片显示出来了，章节列表在它下面。我应该使用表格或某种基础列格式来执行此操作，还是在 css 中有更简单的方法？

我的代码:

 <h4>The Lone Star Mind: An American Intellectual History</h4>
<h6>Table of Contents for forthcoming manuscript (The University of Texas Press)</h6>

<img src="http://www.shsu.edu/his_rtc/index_files/image033.jpg" style="height:50%; width: 50%">
<ul>
  <li>Preface</li>
  <li>Introduction: Promise & Peril beyond the Cultural Turn <a href="http://www.shsu.edu/his_rtc/LSM/INTRODUCTION_use_this_one.htm">(Read draft)</a>
  </li>
  <li>Chapter 1. The Lone Star Mind: The Traditional Texas Past in Historical Perspective</li>

Answer 1

基本上，您希望使用 float: left 让文本环绕图像。然而，这仍然会允许章节列表增长超过图像的高度，所以如果你想确保章节列表不超过该高度，你将需要添加几个容器并使用 overflow: auto 在某处启用章节列表滚动。

img {
  float: left;
  margin-right: 20px;
}

<h4>The Lone Star Mind: An American Intellectual History</h4>
<h6>Table of Contents for forthcoming manuscript (The University of Texas Press)</h6>

<img src="http://www.shsu.edu/his_rtc/index_files/image033.jpg" style="height:50%; width: 50%">
<ul>
  <li>Preface</li>
  <li>Introduction: Promise & Peril beyond the Cultural Turn <a href="http://www.shsu.edu/his_rtc/LSM/INTRODUCTION_use_this_one.htm">(Read draft)</a>
  </li>
  <li>Chapter 1. The Lone Star Mind: The Traditional Texas Past in Historical Perspective</li>

这是使用容器的方法的演示。我认为 HTML5 标签在语义上最合适的用法是 figure 和 figcaption，但如果有更好的选择，有人可以纠正我!

.book {
  height: 300px;
  border: 1px solid #000;
}

.book img {
  display: block;
  height: 300px;
  float: left;
}

.book .contents {
  height: 300px;
  overflow: auto;
}

<h4>The Lone Star Mind: An American Intellectual History</h4>
<h6>Table of Contents for forthcoming manuscript (The University of Texas Press)</h6>

<figure class="book">
  <img class="cover" src="http://www.shsu.edu/his_rtc/index_files/image033.jpg">
  <figcaption class="contents">
    <ul>
      <li>Preface</li>
      <li>Introduction: Promise & Peril beyond the Cultural Turn <a href="http://www.shsu.edu/his_rtc/LSM/INTRODUCTION_use_this_one.htm">(Read draft)</a>
      </li>
      <li>Chapter 1. The Lone Star Mind: The Traditional Texas Past in Historical Perspective</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
      <li>Some more chapters to test.</li>
    </ul>
  </figcaption>
</figure>