Question

我有一个网页，我想在代码中稍微改变一下。我必须在左侧圆圈菜单中，在中间文本和右侧图片中。我想制作3个单独的div /列。你可以在这里看到我的意思：https://plnkr.co/edit/5NWm4E868nXYyixd2SLv?p=preview

基本上我想制作3个长div，例如你可以只需复制粘贴所有图片，在（垂直）和另一个div中的所有文本之间留出一些空格。

所以页面必须看起来一样。

现在我有了这个（只是相关部分）：https://plnkr.co/edit/8re5W6mz73pnU40WaXP8?p=preview

所以它看起来并不像orignal页面。我的问题是我做错了什么？当我想添加另一个图片的圆形菜单时，它将出现在它旁边而不是它下面。然后整个页面搞砸了。如何解决这个问题？

#pageMiddle {
  width: 100%;
  margin: 10px auto;
}

#midleft {
  width: 20%;
  margin: 0px;
  display: block;
  float: left;
  background: orange;
}

#midmid {
  width: 50%;
  margin: 0px;
  display: block;
  float: left;
  background: green;
}

#midright {
  width: 30%;
  margin: 0px;
  display: block;
  float: left;
  background: red;
}

.imageleft {
  float: left;
  margin: 00% 10% 00% 00%;
}

.circle {
  border: solid 2px #73B7DB;
  background: #73B7DB;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  text-align: center;
  line-height: 440%;
  font-size: 22px;
  text-decoration: none;
}

.imageright {
  margin: 0% 0% 0% 0%;
  width: 300px;
  height: 174px
}

<div id="pageMiddle">
  <div id="midleft">
    <a class="imageleft circle" id="how">
      <font color="white">Wie</font>
    </a>
  </div>


  <div id="midmid">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div>

  <div id="midright"><img class="imageright" src="https://placehold.it/300x200" /></div>
</div>

Answer 1

如果我理解正确，你必须在#pageWrapper

中包装整个div

<div id="pageWrapper">
    <div id="pageMiddle">
      <div id="midleft"><a class="imageleft circle" id="how"><font color="white">Wie</font></a></div>
      <div id="midmid">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div>
      <div id="midright"><img class="imageright" src="https://placehold.it/300x200" /></div>
    </div>
    <div id="pageMiddle">
      <div id="midleft"><a class="imageleft circle" id="how"><font color="white">Wie</font></a></div>
      <div id="midmid">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div>
      <div id="midright"><img class="imageright" src="https://placehold.it/300x200" /></div>
    </div>
</div>

有些变化是css

#pageWrapper{
  width: 100%;
  /*max-width:1200px;*/
  margin: 0px auto;
}
#pageMiddle {
  width: 100%;
  margin:10px 0;
  float:left;
}

Answer 2

如果我理解正确，您需要查看代码中的差异。您想要实现的代码没有组件的单独div，而是用边距分隔它们并限制图像大小和圆。然后花车漂浮在他们身上。文本只填充剩余的可用空间。不同的行以灵活的术语（即％）用保证金分隔。

我希望这会有所帮助。

Answer 3

我不是100％你正在寻找什么，但据我所知，你可以通过使用弹性盒来大大简化这一点。虽然有很多方法可以解决这个问题，但灵活盒子似乎是最干净最简单的（对我而言）。

将3个div放在flex容器中，并为每个内部div提供％宽度。（边界只是为了帮助显示div区域）

<article class="container">
<div class="leftCol">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Lol_circle.png" />
</div>     
<div class="centCol">
<p> Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. 
</p>
</div>     
<div class="rightCol">
<img src="http://ursispaltenstein.ch/blog/images/uploads_img/random_natural_acts.jpg" />
</div>
</article>

和CSS：

.container {
display:flex;
}
.centCol {
border: 1px solid red;
width: 50%;
}
leftCol, rightCol {
border: 1px solid blue;
width: 25%;
}
.leftCol img, .rightCol img {
max-width: 100%;
}

希望这会有所帮助。这是你想要玩它的链接。https://codepen.io/11PH/pen/NvNZoe?editors=1100

Answer 4

这是您想要实现的目标的另一种解决方案。它使用bootstrap框架，也是响应。您可以在以下示例中检查代码。它仅使用4个CSS类，并内置自举响应col-*-*类来调整布局。

https://codepen.io/Nasir_T/pen/OjNebO

希望这有助于增加良好的知识。

3个div彼此相邻不能正常工作

4 个答案: