Question

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

现在，我的图像显示，章节列表位于其下方。我应该使用表来执行此操作还是某种基础列格式化，还是在css中有更简单的方法？

我的代码：

＆＃13;

 <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>

＆＃13;

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>

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

1 个答案: