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 元素，以防万一。

标签： htmlcss

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 需要两件事：

1. 父容器（例如 DIV、section、aside、p 等）

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

你在父节点上打开 flexbox ：display:flex;

然后，有各种开关。有些设置在父项上（如justify-content），但其他可能设置在项目上（如flex-grow:1）

YouTube 教程 - 快节奏和同类最佳

这是Flexbox 的一个很棒的备忘单。

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

_{PS 我与视频或它的演示者没有任何联系——我很幸运地发现了它，现在把它传递下去。}

另一个好主意是学习/使用 Bootstrap - 它的主要声名是：(a) 提供用于设计页面的响应式布局网格, 和 (b) 提供许多易于使用的工具，使创建模式对话框、屏幕间谍滚动导航、统一按钮和颜色主题等变得容易。

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