CSS布局问题：如何让Emplogs组件与目标div并排显示

要实现<Emplogs/>和Emp2、All task区域横向并排，只需调整外层布局结构，利用Tailwind的flex属性重新组织容器即可：

核心修改思路 #

1. 将Emp2和All task这两个垂直排列的模块，包裹到一个flex-col容器中，保留它们原有的上下布局
2. 给这个垂直容器和<Emplogs/>的容器套一个外层flex容器，实现横向并排
3. 移除<Emplogs/>容器上的ml-[55rem]，换成合适的间距类，同时调整左侧模块的宽度避免溢出

修改后的完整代码 #

<div className="Emp">
    <div className="ml-5 flex mt-8 h-36">
        <div className="bg-slate-400 w-56 p-20 m-5 rounded-lg"></div>
        <div className="bg-slate-400 w-56 p-20 m-5 rounded-lg"></div>
        <div className="bg-slate-400 w-56 p-20 m-5 rounded-lg"></div>
        <div className="bg-slate-400 w-56 p-20 m-5 rounded-lg"></div>
    </div>
    <div className='boxwithcalender'>
        <div className="shadow-xl mt-24 rounded-xl w-[50rem] ml-15 h-96 p-10 m-10 bg-slate-400">
            <h1>employee</h1>
        </div>
        <div className='calenderdiv'>
            <Calendar onChange={setDate} value={date} />
        </div>
    </div>

    {/* 新增外层flex容器，实现横向并排 */}
    <div className="flex gap-6 ml-10 mr-10">
        {/* 左侧：Emp2 + All task 垂直容器 */}
        <div className="flex-col flex-1">
            <div className='Emp2'>
                <div className="shadow-xl rounded-xl w-full h-96 p-10 m-0 bg-slate-400">
                    <h1>start/end time</h1>
                    <div className="flex">
                        <div className="flex-col">
                            <input className="rounded-xl p-5 m-4" placeholder="start"></input>
                            <input className="rounded-xl p-5 m-4" placeholder=""></input>
                        </div>
                        <div className="flex-col">
                            <input className="rounded-xl p-5 m-4" placeholder="end"></input>
                            <input className="rounded-xl p-5 m-4" placeholder="comment"></input>
                        </div>
                    </div>
                    <button className="bg-white p-4 m-4 hover:bg-blue-950 ml-64 rounded-xl">Start/end</button>
                </div>
            </div>
          
            <div className="shadow-xl rounded-xl w-full h-96 p-10 m-0 mt-6 bg-slate-400">
                <h1>All task</h1>
                <div className="bg-white w-full h-14 rounded-xl p-4 m-2"></div>
            </div>
        </div>

        {/* 右侧：Emplogs组件容器 */}
        <div className='w-80'>
            <Emplogs/>
        </div>
    </div>
</div>

关键样式说明 #

• flex：外层容器使用该类开启横向布局
• flex-col：左侧容器使用该类保持Emp2和All task的垂直排列
• flex-1：让左侧容器自动填充剩余空间，保证右侧Emplogs宽度固定
• gap-6：给左右两个模块添加间距，替代原来的margin
• 移除了左侧模块的ml-15、m-10和Emplogs容器的ml-[55rem]，改用外层容器的ml-10 mr-10统一控制边距，避免布局错位

内容的提问来源于stack exchange，提问作者Ishika Jain