Question

我正在尝试使用基础css flexbox，以便在第一张图片中进行布局。我尝试得到可怕的结果。当我将内容放在网格框中时，内容会使网格框变大或变小，并且与我想要的漂亮布局不匹配。

<div class="row full-width">
<div class="column pl0 pr0 small-12 medium-8">
    <div class="hero inverted full-height"
         style="background-image: url(pic);">
        <div class="row">
            <div class="column small-12">
                <div class="hero-content">
                    <h1>
                        <small class="preHeading">Heading</small>

                        Text
                    </h1>

                    <p class="hero-text text-center">
                        A long text</p>

                    <div class="text-center">
                        <a href="#" class="button button-white button-large"
                           style="">
                            Find products
                        </a>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>
<div class="column small-12 medium-4 grid-x">
    <div class="row">
        <div class="column small-6 medium-12 pr0 pb2">
            <div class="hero inverted shrink" style="background-image: url(pic);">
                <div class="row">
                    <div class="column small-12">
                        <div class="hero-content">
                            <h3>

                                Text
                            </h3>


                            <div class="text-center">
                                <a href="#"
                                   class="button button-white button-large" style="">
                                    Find products
                                </a>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column small-6 medium-12 pr0">
            <div class="hero inverted shrink" style="background-image: url(pic);">
                <div class="row">
                    <div class="column small-12">
                        <div class="hero-content">
                            <h3>

                                Text
                            </h3>


                            <div class="text-center">
                                <a href="#"
                                   class="button button-white button-large" style="">
                                    Find products
                                </a>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

I want this
Wrong result 1
Wrong result 2

有人对如何做到这一点有任何建议吗？

Answer 1

不知道这是否是最好的方法，但你可以这样做：

<div class="grid-container">
<div class="grid-x grid-margin-x">
    <div class="small-6 cell" style="background-color: #aaaaaa;">
        <p>
            Content here to produce space
        </p>
        <p>
            Content here to produce space
        </p>
        <p>
            Content here to produce space
        </p>
        <p>
            Content here to produce space
        </p>
        <p>
            Content here to produce space
        </p>
        <p>
            Content here to produce space
        </p>
        <p>
            Content here to produce space
        </p>
    </div>
    <div class="small-6 cell">
        <div class="grid-y" style="height: 100%;">
            <div class="cell small-6" style="background-color: #cccccc; height: calc(50% - 0.9375rem); margin-bottom: 0.9375rem;">
                Vertical grid cell top
            </div>
            <div class="cell small-6" style="background-color: #333333; height: calc(50% - 0.9375rem); margin-top: 0.9375rem;">
                Vertical grid cell bottom
            </div>
        </div>
    </div>
</div>

您必须根据装订线值调整 0.9375rem 。它占你的阴沟价值的50％。此示例中的内联样式只是为您提供可以快速检查的代码。所以最好设置css类并使用它们。否则，您无法在网格部分处理带有媒体查询的不同装订线。

请务必至少包含此基础模块：

@include foundation-global-styles;
@include foundation-xy-grid-classes;
@include foundation-flex-classes;

请勿同时加载此内容：

// @include foundation-grid;
// @include foundation-flex-grid;

如何使用水平和垂直方向的基础css flexbox？

1 个答案: