Question

我在index.html文件中有以下代码，在样式文件中，我有.block {float：left; width：33.3％;}谁能告诉我为什么我的输出不会将我的段落分成3个部分。

<div class="block">
        <h3>Heading</h3>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>

        <div class="block">
        <h3>Heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al qua. Ut enim ad minim veniam,
        </p>

        <div class="block">
        <h3>Heading</h3>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>

    </div>

Answer 1

您可以尝试使用flex-box进行此操作。这是非常有用的CSS选项。在CSS中：

.main {
  display: flex;
}

.block {
  flex-flow: row nowrap;
  width: 33%;
}

在HTML中：

<div class="main">
  <div class="block">
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
  </div>
  <div class="block">
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
  </div>
  <div class="block">
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
  </div>
</div>

如果我有帮助，可以给我点赞，谢谢;）

Answer 2

您可以使用类似这样的东西。

.block {
  display: inline-block;
  width: 32%;
}

<div>

  <div class="block">
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    </p>
  </div>

  <div class="block">
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    </p>
  </div>

  <div class="block">
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    </p>
  </div>

</div>

使用CSS定位段落

2 个答案: