web-dev-qa-db-ja.com

Tailwind CSSでのHTML要素の配置

私はtailwind-cssを学ぼうとしているのですが、要素の位置に苦労しているところでcssを学んでいると言えます。 Vue jsコンポーネントの作業。

これまでにいくつかの要素の設計を行いました。

Home screen

feature page

banner page

description

banner/dark-blueエリア内にいくつかの形状またはデザインを追加し、その中にウィジェットボックスを追加します。私のコードは次のようになります：

<div class="bg-white block">
    <nav-bar></nav-bar>
    <div class="hidden md:block w-2/5 top-0 left-0">
        <img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
    </div>
    <div class="hidden md:block">
        <img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
    </div>
    <div class="block">
        <div class="absolute w-full top-0 pl-12 pr-12 pt-40">
            <slider></slider>
            <div class="flex justify-around">
                <card></card>
                <card></card>
                <card></card>
                <card></card>
            </div>
        </div>
    </div>
    <div class="block">
        <div class="bg-white overlflow-hidden">
            <div class="relative">
                <img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
                <img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
            </div>
        </div>
    </div>
    <feature></feature>
</div>

コンポーネントコードの参照： https://github.com/nitish1986/sample_website

私のアプローチは、親要素の位置を固定するか、相対的にしてから、親要素に対して絶対配置で図形を配置することでしたが、絶対位置を配置しようとすると、図形はWebサイトの上部に到達します。それぞれの位置付けをとっていません

<div class="bg-white overlflow-hidden">
    <div class="relative">
        <img src="/nits-assets/images/screenshot_banner.png" alt="screenshot_banner" align="center">
        <img class="absolute top-0 left-0" src="/nits-assets/images/pattern_1.png" alt="banner" align="left">
    </div>
</div>

この位置付けをどのように達成できますか？私はこのようなことを達成したいです：

enter image description here

それへのより良いアプローチは大歓迎です。ありがとう。

htmlcssvue.jscss-positiontailwind-css
5
Nitish Kumar

私は自分の問題について多くの調査作業を行いましたが、私の絶対的な要素が私に必要なすべてのスペースを占めていることがわかりました。空のスペースを定義するか、絶対要素で正確に消費されるdivの高さを定義する必要があることを知りました。私のコードには非常に長い絶対要素があるので、カバーできるのは空のdivスペースだけです。

<div class="bg-white block">
    <nav-bar></nav-bar>
    <div class="hidden md:block w-2/5 top-0 h-auto">
        <img src="/nits-assets/images/body_shape.png" alt="shape" align="left">
    </div>
    <div class="hidden md:block h-auto">
        <img src="/nits-assets/images/body_shape_2.png" alt="shape" align="right">
    </div>
    <div class="block bg-white h-screen">
        <div class="relative">
            <div class="absolute w-full top-0 pl-12 pr-12 pt-40">
                <slider></slider>
                <div class="flex justify-around">
                    <card></card>
                    <card></card>
                    <card></card>
                    <card></card>
                </div>
            </div>
        </div>
    </div>
    <div class="block mt-48 p-56">
        <div class="p-2 w-full h-100"></div>
    </div>
    <feature></feature>
    <preview></preview>
    <about-us></about-us>
</div>

だから私のコードでは私は空のスペースを保ちました：

<div class="block mt-48 p-56">
    <div class="p-2 w-full h-100"></div>
</div>

これが誰かを助けることを願っています。ありがとう

1
Nitish Kumar

この種のグリッドを実現するには、Tailwind CSSが提供するflexクラスの使用を検討する必要があります。公式ドキュメントにある非常に優れたガイド： https://tailwindcss.com/docs/flex/

特に、最初のサイズを無視して、必要に応じてフレックス項目を拡大および縮小できるクラス.flex-1を試してください。

1
Mario Boss