主页 / 问题 / 1086926
Accepted
VanilJS
Asked:2020-02-25 02:42:18 +0000 UTC2020-02-25 02:42:18 +0000 UTC

如何修复浮动中的浮动？

  • 772

如何调整浮动中的换行，以便一次没有填充一个单词？
比如说，只有 1-2 行

在此处输入图像描述

.parent {
  display: block;
  width: 250px;
  border: 1px solid gray;
}
.parent div {
  display: inline-block;
  float: left;
  padding: 5px;
  background-color: gray;
  margin: 5px
}
.parent p {
  text-align: justify
}
<div class="parent">
  <div>Lorem</div>
  <div>consectetur</div>
  <div>velu</div>
  <div>Blanditiis</div>
  <div>nulla</div>
  <div>am</div>

<p>Ai Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ducimus atque maxime dolorum fugit beatae, veritatis quam? Blanditiis cupiditate minima nulla magnam ipsa totam dolorum vel, quaerat nobis, molestiae maiores.</p>
</div>

javascript

3 个回答

  1. Best Answer

    好吧，假设这是可能的。但这不适合你，对吧？Lor 的第一个音节连字符没有空间使用hyphens: auto。

    .parent {
  display: block;
  width: 250px;
  border: 1px solid gray;
}

.parent div {
  display: inline-block;
  float: left;
  padding: 5px;
  background-color: gray;
  margin: 5px
}

.parent p {
  text-align: justify;
  word-break: break-all;
}
    <div class="parent">
  <div>Lorem</div>
  <div>consectetur</div>
  <div>velu</div>
  <div>Blanditiis</div>
  <div>nulla</div>
  <div>am</div>

  <p>Ai Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ducimus atque maxime dolorum fugit beatae, veritatis quam? Blanditiis cupiditate minima nulla magnam ipsa totam dolorum vel, quaerat nobis, molestiae maiores.</p>
</div>

    也可以用js写一个简单的排版器，把短词后面的空格改成不换行的空格。

    UPD：我想到了另一个想法：

    .parent {
  display: block;
  width: 250px;
  border: 1px solid gray;
  letter-spacing: -.05em;
}

.parent div {
  display: inline-block;
  float: left;
  padding: 5px;
  background-color: gray;
  margin: 5px;
}

.parent p {
  text-align: justify;
  hyphens: auto;
}
    <html lang="en">
<div class="parent">
  <div>Lorem</div>
  <div>consectetur</div>
  <div>velu</div>
  <div>Blanditiis</div>
  <div>nulla</div>
  <div>am</div>

  <p>Ai Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ducimus atque maxime dolorum fugit beatae, veritatis quam? Blanditiis cupiditate minima nulla magnam ipsa totam dolorum vel, quaerat nobis, molestiae maiores.</p>
</div>

    UPD2：我不能再被阻止了，另一个想法。)))

    .parent {
  display: block;
  width: 250px;
  border: 1px solid gray;
  font-stretch: condensed;
  font-family: sans-serif;
}

.parent div {
  display: inline-block;
  float: left;
  padding: 5px;
  background-color: gray;
  margin: 5px
}

.parent p {
  text-align: justify;
  hyphens: auto;
}
    <html lang="en">
<div class="parent">
  <div>Lorem</div>
  <div>consectetur</div>
  <div>velu</div>
  <div>Blanditiis</div>
  <div>nulla</div>
  <div>am</div>

  <p>Ai Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ducimus atque maxime dolorum fugit beatae, veritatis quam? Blanditiis cupiditate minima nulla magnam ipsa totam dolorum vel, quaerat nobis, molestiae maiores.</p>
</div>

    • 3

  2. 这个问题并不完全清楚。同样的float，可以有多少个，字可以多长，一次一个或不只一个，父块可以多大，总之有很多问题。也许是下一个选择。将浮点数放在一个单独的块中，我想你会在代码中进一步弄清楚。看：

    * {
  margin: 0;
  padding: 0;
}

.parent__float {
  display: block;
  width: 250px;
  padding: 3px;
  border: 1px solid gray;
}

.parent {
  float: left;
  overflow: hidden;
  max-width: 130px;
  margin-right: 5px;
}

.parent div {
  display: inline-block;
  float: left;
  background-color: gray;
  margin: 5px;
  padding: 5px;
}

.parent p {
  margin: 2px;
  padding: 0;
  line-height: 1.5;
  text-align: justify;
}
    <div class="parent__float">
  <div class="parent">
    <div>Lorem</div>
    <div>consectetur</div>
    <div>velu</div>
    <div>Blanditiis</div>
    <div>nulla</div>
    <div>am</div>
  </div>
  <p>Ai Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ducimus atque maxime dolorum fugit beatae, veritatis quam? Blanditiis cupiditate minima nulla magnam ipsa totam dolorum vel, quaerat nobis, molestiae maiores.</p>
</div>

    • 1

    1. 孩子游泳时的花车规则 - 父母对此负责。例如：

      .parent{ 明确：两者；显示：表格；} .parent div{ 浮动：左；}

    • 0

相关问题