css Flex显示器:将列宽设为内容

bfrts1fy  于 2023-02-14  发布在  其他
关注(0)|答案(3)|浏览(158)

我有一个简单的两列布局:

  • 在左边有一些文字
  • 右侧有一个或多个链接按钮

这里是我的代码

.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)。左侧的文本占据了整个剩余空间。链接按钮内的文本不应在新行上。
| 怎么样|它应该是怎样的|
| - ------|- ------|
|

|

|
|

|

|

uxhixvfz

uxhixvfz1#

看看这个

.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;
  flex:auto;
}

.right-column {
  border: 1px solid tomato;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
flex:1;
}

.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>
4xy9mtcn

4xy9mtcn2#

<style>
    .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;
        width: 100%;
    }

    .right-column {
        border: 1px solid tomato;
        display: flex;
        flex-direction: column;
    }

    .button-link {
        border: 2px solid black;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        white-space: nowrap;
    }
</style>
7gs2gvoe

7gs2gvoe3#

只需添加flex:1按钮链接,例如:

.button-link {
    border: 2px solid black;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    white-space: nowrap;
    **flex: 1;**
}

相关问题