Question

我是HTML编程新手，所以如果这个问题太基础，我深表歉意。

我想在目录周围包裹文章的内容。这是我的HTML网页。那就是我希望目录在左边，而文章本身直接在右边。如果可能，我想在一个单独的CSS文件中执行此操作。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
  <title>How to Win Friends and Influence People</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>

<body>
  <div id="content">
    <h1 class="title">How to Win Friends and Influence People</h1>
    <div id="table-of-contents">
      <h2>Table of Contents</h2>
      <div id="text-table-of-contents">
        <ul>
          <li><a href="#sec-1">1. Introduction</a></li>
          <li><a href="#sec-2">2. Section 2</a>
            <ul>
              <li><a href="#sec-2-1">2.1. Subsection 3</a></li>
            </ul>
          </li>
          <li><a href="#sec-3">3. Section 4</a></li>
        </ul>
      </div>
    </div>

    <div id="outline-container-sec-1" class="outline-2">
      <h2 id="sec-1"><span class="section-number-2">1</span> Introduction</h2>
      <div class="outline-text-2" id="text-1">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit
          amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis
          ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
        </p>
        <div class="figure">
          <p><img src="test-asy.svg" alt="test-asy.svg" width="600" align="right" />
          </p>
        </div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit
          amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis
          ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
        </p>
      </div>
</body>
</html>

Answer 1

您应该尝试使用CSS Flexbox或CSS浮点数。

HTML：

<div class="container">
<div class="table-contents">
  <h3>
    Table of Contents
  </h3>
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
  </ul>
</div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.</p>
  </div>
</div>

CSS：

.container{
  display: flex;
}

.table-contents, .content{
  padding: 10px;
}

.table-contents{
  flex: 1 0 auto;
  width: 150px;
}

这是一个小提琴：http://jsfiddle.net/wkszuvLm/1/ 希望这会有所帮助。

Answer 2

body标签已经在那里包裹了一切，您可以使用它，也可以在div内添加另一个body来包裹其他所有东西。有多种将元素放置在容器中的方法。了解有关使用设置为css或display的{{1}} grid属性的信息。两者都有自己的属性子集。使用flex标签可使用外部CSS文件。

link

Answer 3

您可以将它们放在两个不同的div中，然后根据需要对其进行样式设置。

.divLeft {
    width:100px;
    display:block;
    float: left;
}
.divRight {
    width:100px;
    display:block;
    float: right;
}

您可以将以上内容放入css文件中，并调用您的<head>标签，也可以按以下方式使用它：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>How to Win Friends and Influence People</title>
<meta  http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.divLeft {
    width:100px;
    display:block;
    float: left;
}
.divRight {
    width:100px;
    display:block;
    float: right;
}
</style>
</head>
<body>
<div id="content">
<div class="divLeft">
<h1 class="title">How to Win Friends and Influence People</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#sec-1">1. Introduction</a></li>
<li><a href="#sec-2">2. Section 2</a>
<ul>
<li><a href="#sec-2-1">2.1. Subsection 3</a></li>
</ul>
</li>
<li><a href="#sec-3">3. Section 4</a></li>
</ul>
</div>
</div>
</div>

<div class="divRight">
<div id="outline-container-sec-1" class="outline-2">
<h2 id="sec-1"><span class="section-number-2">1</span> Introduction</h2>
<div class="outline-text-2" id="text-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>

<div class="figure">
<p><img src="test-asy.svg" alt="test-asy.svg" width="600" align="right" />
</p>
</div>


<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices arcu massa, vel euismod risus consequat eu. Vivamus vel magna sed est efficitur faucibus et id arcu. Sed facilisis arcu orci, non vulputate arcu gravida in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at neque a ante iaculis eleifend fermentum at tortor. Aliquam a mollis risus. Sed pharetra tempus eros ut posuere. In hac habitasse platea dictumst. Aenean tempus elit nec nisi iaculis, sed convallis ipsum egestas. In condimentum mattis velit eget tincidunt. Nam at erat nec est hendrerit dignissim. Etiam orci diam, laoreet sit amet diam et, porttitor bibendum ante.
</p>
</div>

</div>
</body>
</html>

如何在目录周围换行

3 个答案: