英文:
Give same width to items vertically positioned
问题
我有两个垂直排列的项目，并且我希望较窄的一个与较宽的一个一样宽。
我的代码如下：
<div class="flex flex-col items-end">
<div>This should take all the space</div>
<div class="flex flex-row gap-x-4">
<div> this is the first element</div>
<div> this is the second element</div>
</div>
</div>
并且生成
然而，我希望结果是
items-end 是必需的，因为项目显示在页面的右侧。
我已经尝试过调整位置，但无法实现我寻找的最终结果。
有人可以帮我吗？
英文:
I have two items positioned vertically, and I'd like the narrower one is as wide as the wider one.
My code looks like
<div class="flex flex-col items-end">
<div>This should take all the space</div>
<div class="flex flex-row gap-x-4">
<div> this is the first element</div>
<div> this is the second element</div>
</div>
</div>
and produce
However, I would like the result to be
items-end is needed because the items are displayed on the right side of the page.
I have tried to mess with positioning, but I cannot achieve the final result I'm looking for.
Can anyone give me a hand on this?
答案1
得分: 1
你可以对容器进行收缩包装，然后将其右对齐：
<!-- 开始代码段: js 隐藏: false 控制台: false Babel: false -->
<!-- 语言: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col w-max ml-auto">
<div>This should take all the space</div>
<div class="flex flex-row gap-x-4">
<div> this is the first element</div>
<div> this is the second element</div>
</div>
</div>
<!-- 结束代码段 -->
你还可以使用一个带有一个max-content大小的网格列轨道的网格布局，然后将网格列轨道对齐到右侧：
<!-- 开始代码段: js 隐藏: false 控制台: false Babel: false -->
<!-- 语言: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-[max-content] justify-end">
<div>This should take all the space</div>
<div class="flex flex-row gap-x-4">
<div> this is the first element</div>
<div> this is the second element</div>
</div>
</div>
<!-- 结束代码段 -->
英文:
You could shrink-wrap the container and then right align it:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col w-max ml-auto">
<div>This should take all the space</div>
<div class="flex flex-row gap-x-4">
<div> this is the first element</div>
<div> this is the second element</div>
</div>
</div>
<!-- end snippet -->
You could also use a grid layout with one grid column track sized to max-content and then align the grid column track to the right:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-[max-content] justify-end">
<div>This should take all the space</div>
<div class="flex flex-row gap-x-4">
<div> this is the first element</div>
<div> this is the second element</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论