如何在目录周围换行

Question

I am HTML programming newbie so I apologies if this question is too elementary. 我是HTML编程新手，所以如果这个问题太基础，我深表歉意。

I want to wrap the contents of an article around the table of contents. 我想在目录周围包裹文章的内容。 Here is my HTML web-page. 这是我的HTML网页。 That is I would like the table of contents to be on the left, and the article itself directly to start to the right of it. 那就是我希望目录在左边，而文章本身直接在右边。 If possible, I would like to do this in a separate CSS file. 如果可能，我想在一个单独的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

You should try using css Flexbox or css floats. 您应该尝试使用CSS Flexbox或CSS浮点数。

HTML: 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: CSS：

.container{
  display: flex;
}

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

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

Here is a fiddle: http://jsfiddle.net/wkszuvLm/1/ Hope this helps. 这是一个小提琴： http : //jsfiddle.net/wkszuvLm/1/希望这会有所帮助。

Answer 2

body tag is already there wrapping around everything, you could use it as well as adding another div inside body to wrap everything else. body标签已经存在，可以包裹一切，您可以使用它，也可以在body内添加另一个div来包裹其他所有东西。 There are multiple ways to place elements within a container. 有多种将元素放置在容器中的方法。 Learn about using css display property set to grid or flex . 了解有关使用css display属性设置为grid或flex 。 Both come with their own subset of properties. 两者都有自己的属性子集。 use link tag to use an external css file. 使用link标记以使用外部CSS文件。

<link rel="stylesheet" type="text/css" href="css_file_url_here">

Answer 3

You can do it by putting those in two different div and then style them as required. 您可以通过将它们放在两个不同的div ，然后根据需要对其进行样式设置来实现。

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

You can put the above in css file and call in your <head> tag or you can also use it as below: 您可以将以上内容放入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 个解决方案

解决方案1
2 已采纳 2018-11-05 03:48:45

解决方案2
0 2018-11-05 03:40:31

解决方案3
0 2018-11-05 03:49:01

如何在目录周围换行

问题描述

3 个解决方案

解决方案1 2 已采纳 2018-11-05 03:48:45

解决方案2 0 2018-11-05 03:40:31

解决方案3 0 2018-11-05 03:49:01

解决方案1
2 已采纳 2018-11-05 03:48:45

解决方案2
0 2018-11-05 03:40:31

解决方案3
0 2018-11-05 03:49:01