Question

我收到了这段代码，我试图让我的3个div互相浮动，但他们不是。相反，它们在彼此之下，虽然我把它们放在浮动：左边。看起来不对。

任何人都可以看到问题所在？

https://plnkr.co/edit/Gec74f7zLVqSrB6d4hNU?p=preview

.smallmenu {
  margin: 0 auto;
  max-width: 436px;
  width: 100%;
}

.container {
  margin: 0 auto;
  width: 100%;
}

.left {
  width: 30%;
  margin: 05% 00% 00% 05%;
  float: left;
}

.imageleft {
  float: left;
}

.paragraphs {
  margin: 5% 30% 2% 20%;
  width: 40%;
  float: left;
}

.right {
  width: 30%;
  float: left;
  margin: 0% 00% 00% 00%;
}

.imageright {
  width: 300px;
}

#hovermenu:hover {
  border: solid 2px #464646;
  background: #464646;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  text-align: center;
  line-height: 440%;
  font-size: 22px;
  text-decoration: none;
}

<div class="container">
  <div class="left">
    <a class="imageleft circle" id="why">
      <font color="white">Warum</font>
    </a>
  </div>
  <div class="paragraphs">

    Mit dem Fahrrad zur Schule zu fahren, wirkt sich positiv auf die schulische Leistung und die Gesundheit aus. Außerdem macht es Spaß und ist flexibel. Um den <b>Schulweg auch sicher zu gestalten</b>, werden Geographische Informationssysteme (GIS) verwendet.
    Damit werden gefährliche Stellen identifiziert, Grundlagen für sichere Infrastruktur geschaffen und sichere Routen berechnet.
  </div>
  <div class="right">
    <img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/why300x200-300dpi.jpg" />
  </div>

</div>

Answer 1

在此处删除margin，因为您希望块位于同一行。

要在单行上移动块，可以在此处使用flexbox。为容器添加display: flex。 Flex项目（容器的直接子项忽略float，以便您可以删除它们）。演示：

＆＃13;

.smallmenu {
  margin: 0 auto;
  max-width: 436px;
  width: 100%;
}

.container {
  margin: 0 auto;
  width: 100%;
  display: flex;
}

.left {
  width: 30%;
}

.paragraphs {
  width: 40%;
}

.right {
  width: 30%;
}

.imageright {
  width: 300px;
}

#hovermenu:hover {
  border: solid 2px #464646;
  background: #464646;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  text-align: center;
  line-height: 440%;
  font-size: 22px;
  text-decoration: none;
}

＆＃13;

<div class="container">
  <div class="left">
    <a class="imageleft circle" id="why">
      <font color="white">Warum</font>
    </a>
  </div>
  <div class="paragraphs">
    Mit dem Fahrrad zur Schule zu fahren, wirkt sich positiv auf die schulische Leistung und die Gesundheit aus. Außerdem macht es Spaß und ist flexibel. Um den <b>Schulweg auch sicher zu gestalten</b>, werden Geographische Informationssysteme (GIS) verwendet.
    Damit werden gefährliche Stellen identifiziert, Grundlagen für sichere Infrastruktur geschaffen und sichere Routen berechnet.
  </div>
  <div class="right">
    <img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/why300x200-300dpi.jpg" />
  </div>

</div>

＆＃13;

另一种方法是将display: table用于容器，将display: table-cell用于其子项（此处也不需要浮点数）：

＆＃13;

.smallmenu {
  margin: 0 auto;
  max-width: 436px;
  width: 100%;
}

.container {
  margin: 0 auto;
  width: 100%;
  display: table;
}

.container > * {
  display: table-cell;
  vertical-align: top;
}

.left {
  width: 30%;
}

.paragraphs {
  width: 40%;
}

.right {
  width: 30%;
}

.imageright {
  width: 300px;
}

#hovermenu:hover {
  border: solid 2px #464646;
  background: #464646;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  text-align: center;
  line-height: 440%;
  font-size: 22px;
  text-decoration: none;
}

＆＃13;

<div class="container">
  <div class="left">
    <a class="imageleft circle" id="why">
      <font color="white">Warum</font>
    </a>
  </div>
  <div class="paragraphs">
    Mit dem Fahrrad zur Schule zu fahren, wirkt sich positiv auf die schulische Leistung und die Gesundheit aus. Außerdem macht es Spaß und ist flexibel. Um den <b>Schulweg auch sicher zu gestalten</b>, werden Geographische Informationssysteme (GIS) verwendet.
    Damit werden gefährliche Stellen identifiziert, Grundlagen für sichere Infrastruktur geschaffen und sichere Routen berechnet.
  </div>
  <div class="right">
    <img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/why300x200-300dpi.jpg" />
  </div>

</div>

＆＃13;

Answer 2

删除margin和float，然后改为使用display: table*：

.smallmenu {
  margin: 0 auto;
  max-width: 436px;
  width: 100%;
}

.container {
  margin: 0 auto;
  width: 100%;
  display: table;
}

.left {
  width: 30%;
  display: table-cell;
}

.imageleft {}

.paragraphs {
  width: 40%;
  display: table-cell;
}

.right {
  width: 30%;
  display: table-cell;
}

.imageright {
  vertical-align: top;
}

#hovermenu:hover {
  border: solid 2px #464646;
  background: #464646;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  text-align: center;
  line-height: 440%;
  font-size: 22px;
  text-decoration: none;
}

<div class="container">
  <div class="left">
    <a class="imageleft circle" id="why">
      <font color="white">Warum</font>
    </a>
  </div>
  <div class="paragraphs">

    Mit dem Fahrrad zur Schule zu fahren, wirkt sich positiv auf die schulische Leistung und die Gesundheit aus. Außerdem macht es Spaß und ist flexibel. Um den <b>Schulweg auch sicher zu gestalten</b>, werden Geographische Informationssysteme (GIS) verwendet.
    Damit werden gefährliche Stellen identifiziert, Grundlagen für sichere Infrastruktur geschaffen und sichere Routen berechnet.
  </div>
  <div class="right">
    <img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/why300x200-300dpi.jpg" />
  </div>

</div>

漂浮在彼此旁边的3个div不能正常工作

2 个答案: