Question

我无法将段落放在其他div内容之间的页面中间。

我有两个div元素，一个在左边，另一个在右边，我希望这些段落位于这两个div元素之间，但我无法弄清楚。

现在，这些段落位于页面的中心-但它们显示在div元素下方，而不是在它们之间。

我尝试使这些段落的位置绝对无误，但随后的文字会全部放在顶部，因此我尝试在段落中增加边距，但这并没有影响，所以我又回到原来的样子。

p{
    color: white;
    float: center;
    text-align: center;
    display: inline-block;
    margin: 0 0 0 32vw;
    padding: 0;
    width: 15em;
    border: 1px solid white; 
    font-family: Verdana, Sans-Serif;
    font-size: 2.5em;
    line-height: 2em;
    overflow: hidden;
}

.TallPhotos{
    display: inline-block;
    float: right;
    max-width: 21vw;
    margin: 0;
    padding: 0;
    border: 1px solid green;
    overflow: hidden;
}

为了防止万一，我添加了一个div元素。

Answer 1

最简单的方法是使用flexbox。

.flex-parent{display:flex;}

<div class="flex-parent">
    <div class="flex-child">
        <img src="http://placekitten.com/150/300" />
    </div>
    <div class="flex-child">
        <p>Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. Lorem ipsum dolor sit amut. </p>
    </div>
    <div class="flex-child">
        <img src="http://placekitten.com/150/300" />
    </div>
</div>

Bootstrap将整个平台从Bootstrap3重新分配到Bootstrap4的原因，主要是从使用浮动转换为flexbox。

Flexbox需要做两件事：

父容器（例如DIV，剖面，侧面，p等）
一个或多个子元素（例如div，p，img等）

您在父级上打开弹性框：display:flex;

然后，有各种开关。有些设置在父项上（例如justify-content），而有些设置在项上（例如flex-grow:1）

YouTube tutorial - fast-paced and best-of-breed

Here is a great cheatsheet for Flexbox。

观看本教程，从现在开始的40分钟内，您的问题将得到解决-并且您将了解flexbox。

_{P.S。我与该视频或其演示者没有任何联系-很幸运，我发现了它，现在将其传递了。}

另一个不错的主意是learn/use Bootstrap-其成名的主要主张是：（a）提供用于设计页面的自适应布局网格*具有极大的好处，即页面在所有页面上看起来都很棒屏幕尺寸和设备，以及（b）提供许多易于使用的工具，这些工具将使创建模态对话框，屏幕间谍滚动导航，统一按钮和颜色主题等变得容易。

请注意，从Bootstrap3到Bootstrap4的主要更改是重新设计了Flexbox中的核心网格系统。。这使您了解了flexbox的重要性。

Answer 2

请使用display：flex;

这是一些代码，我很累，希望这对您有所帮助。

<div class="container">
   <div class="content">
       <div class="image1">
          <img src="https://tinyjpg.com/images/social/website.jpg" alt="">
       </div>
         <div class="paragraph">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, a ad sequi. Voluptas enim veniam modi. Sapiente amet, quas quasi aliquid, velit perferendis optio voluptate earum adipisci eius itaque totam.</p>
          </div>
          <div class="image2">
              <img src="https://tinyjpg.com/images/social/website.jpg" alt="">
          </div>
    </div>
</div>

.container {
        width: 80%;
        margin: 0 auto;
    }
    .content
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        align-content: center;
    }
    .content .image1,
    .content .image2,
    .content .paragraph
    {
        width: 32%;
    }
    img
    {
        width: 100%;
    }

Answer 3

您可以重组代码以使用三个div而不是两个和一个段落。您的中心div可以包含以下段落：

.parent {
  display: flex;
}
.para {
   padding: 6px 12px;
}

<div class="parent">
  <div>
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="para">
    <p>
    This is a paragraph
    </p>
  </div>
  <div>
    <img src="https://via.placeholder.com/150" />
  </div>
</div>

Answer 4

我的想法是添加一个主div。按顺序获取img（div），段落，img（div）中的所有3个元素。然后在CSS中使用主div：

display flex; justify-content：space-between;

这应该得到正确的设置。从那里开始播放元素的宽度，并以自己喜欢的方式获得效果。

干杯。

如何在包含图像的两个div元素之间显示文本段落？

4 个答案: