列的对齐有什么问题,在小屏幕中它不会对齐

What's wrong with the alignment of the columns, In Small screen it won't align

提问人:gotshe dogs 提问时间:11/16/2023 更新时间:11/16/2023 访问量:23

问:

t<!-- Main Content Container -->
<div class="flex flex-col md:flex-row mx-auto p-2 items-center justify-center max-w-full flex-wrap">

    <!-- First Column -->
    <div class="flex flex-col items-center justify-center md:mr-4 mb-4 md:mb-0 max-w-full md:max-w-[50%]">
        <div class="flex items-center justify-center"> 
            <div class="w-40 h-5 text-black text-lg font-bold font-inter">Name</div>
            <div class="ml-2 md:ml-1 md:mr-2 border-b border-black w-64 md:w-80 h-7">
                <span id="name-data" class="text-black text-base font-bold font-inter"></span>
            </div>
        </div>>
</div>>

 <!-- Second Column -->
    <div class="flex flex-col items-center justify-center max-w-full md:ml-2 md:mt-4">
        <div class="flex items-center justify-center">
            <div class="w-40 h-5 text-black text-lg font-bold font-inter md:ml-16">Age</div>
            <div class="ml-2 md:ml-1 md:mr-2 border-b border-black w-64 md:w-80 h-7">
                <span id="age-data" class="text-black text-base font-bold font-inter"></span>
            </div>
        </div>
</div>ype here

我希望它是一个响应式页面,如果我将屏幕从小到大运行,那么在边距和位置方面并不简洁。

我认为第二列有问题。

HTML 网格 Tailwind-CSS 多列 响应

评论


答: 暂无答案