html - 使用 flexbox 在主列中创建列

Question

我在 Bootstrap 3 中制作了下图。我正在为一个使用 BS3 的站点编程。不可能使用BS4。

我在使用 BS3 的列高方面遇到了很多问题，所以我现在放弃了。我上周开始使用弹性盒，因为它看起来更容易使用。

是否可以使用 flexbox 在图像上进行设计？我已经用 flexboxes 制作了 2 个主列，但我不太确定如何在右侧主列中制作 2 个列。我试图在其中安装一些引导程序，但这完全错了。

.call-out-container {
        max-width: 1200px;
        margin: 40px auto 0 auto;
    }
    .call-out {
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 20px;
        flex-basis: 48%;
    }
    .call-out:nth-child(1) {background-color: pink}
    .call-out:nth-child(2) {background-color:rgb(41, 255, 201)}

    @media (min-width: 768px) {
        .call-out-container {
            display:flex;
            justify-content: space-between;
        }
    }

<div class="call-out-container">
    <div class="call-out">
        <h4>Headline 1</h4>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa</p>
    </div>
    <div class="call-out">
        <h4>Headline 2</h4><hr/>
        
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
    </div>
</div>

标签： htmlcssflexbox

Answer 1

为了使用 flexbox 创建右侧的设计，您需要：

1.把你的两列包装成一个单独的div。

   <div class="call-out">
            <h4>Headline 2</h4><hr/>
            <div class="two-column">
                <div class="column">
                    <img src="https://via.placeholder.com/250x150.png">
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                </div>
                <div class="column">
                    <img src="https://via.placeholder.com/250x150.png">
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
                </div>

            </div>
        </div>

在这个例子中，我将两列包装成一个名为两列的 div

2.显示Flex新创建的div

.two-column{
    display: flex;
    flex-direction: row;
}

你可以在这里看到结果：

请注意：您必须添加一些调整/媒体查询以提供所需的响应行为，但是这种方法应该可以轻松地让您创建嵌套列布局。

有用的提示：请记住，您始终可以 display: flex 元素是已经使用 display: flex 的元素的子元素

希望能帮助到你。