我有一个简单的两列布局:
- 在左边有一些文字
- 右侧有一个或多个链接按钮
这里是我的代码
.container {
padding: 20px;
border: 2px solid black;
display: flex;
gap: 15px;
border-radius: 10px;
}
.left-column {
border: 1px solid lightgray;
display: flex;
justify-content: center;
align-items: center;
}
.right-column {
border: 1px solid tomato;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.button-link {
border: 2px solid black;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
white-space: nowrap;
}
<div class="container">
<div class="left-column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="right-column">
<a class="button-link">A link button</a>
<a class="button-link">Another link button</a>
</div>
</div>
我需要右列的宽度不大于最大按钮的大小(在本例中是第二个Another link button
)。左侧的文本占据了整个剩余空间。链接按钮内的文本不应在新行上。
| 怎么样|它应该是怎样的|
| - ------|- ------|
|
|
|
|
|
|
3条答案
按热度按时间uxhixvfz1#
看看这个
4xy9mtcn2#
7gs2gvoe3#
只需添加flex:1按钮链接,例如: