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

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 是有原因的，主要是为了从使用 float 改为使用 flexbox。

Flexbox 需要两件事:

1. 父容器(例如 DIV、section、aside、p 等)

2. 一个或多个子元素(例如div、p、img等)

您在父级上打开:display:flex;

然后，有各种开关。有些设置在父项上(如 justify-content 的情况)，但其他可能设置在元素上(如 flex-grow:1)

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

Here is a great cheatsheet用于 Flexbox。

观看教程，40 分钟后您的问题就会得到解决——您就会了解 flexbox。

_{附言我与该视频或其主持人没有任何关系 - 我很幸运地发现了它，现在将它传递出去。}

另一个好主意是 learn/use Bootstrap - 它的主要成名之处在于:(a) 提供用于设计页面的响应式布局网格 * 最大的好处是您的页面在所有屏幕尺寸和设备上看起来都很棒，以及 (b) 提供一个数字易于使用的工具，可以轻松创建模式对话框、屏幕 spy 滚动导航、统一按钮和颜色主题等。

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