css 盒内的Flex盒

mi7gmzs6 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(101)

我试着把一个盒子放进一个盒子里，盒子的布局会根据屏幕的大小而改变。如果低于400px。
我在两点上遇到了麻烦：
1.将内盒与外盒的中心右侧对齐，并
1.在较小的显示器上，使用Flexbox将内部框做成一个'行'，并落在外部框的底部
Large display results
Small display results

<p class="inline-block-buttons">
  Text 1
  <a>Text 2</a>
</p>

p {
  border: 1px solid black;
  margin: 2rem 0;
  padding: 0.25rem;
}

a {
  padding: 1rem 2rem;
  border: 1px solid black;
  text-decoration: none;
  margin: 1rem;
  border-radius: 2px;
}

.inline-block-buttons a {
  display: inline-block;
  align-self: right;
}
body {
  margin: 2rem;
}
  @media (max-width: 500px) {
  .inline-block-buttons {
    flex-direction: column;
  }

css

来源：https://stackoverflow.com/questions/76506744/flex-box-inside-a-box

2条答案

按热度按时间

qmelpv7a1#

试试这个：

div.inline-block-buttons {
    display: flex;
    justify-content: space-between;
    padding: 30px;
    flex-wrap: wrap;
}

.inline-block-buttons {
    border: 1px solid black;
    border-radius: 10px;
    padding: 15px 100px;
}

@media (max-width: 500px) {
  .inline-block-buttons {
    flex-direction: column;
    text-align: center;
  }
  .inline-block-buttons p {
    margin-bottom: 50px;
  }
}

<div class="inline-block-buttons">
        <p>Text 1</p>
        <a class="inline-block-buttons">Text 2</a>
 </div>

赞(0）回复(0）举报 2023-06-25

ht4b089n2#

p {
  border: 1px solid black;
  margin: 2rem 0;
  padding: 1rem 2rem;
  display:flex;
  align-items: center;
  border-radius: 10px;
}

a {
  padding: 1rem 2rem;
  border: 1px solid black;
  text-decoration: none;
  margin: 1rem;
  border-radius: 10px;
}

.inline-block-buttons a {
  margin-left: auto;
}

body {
  margin: 2rem;
  flex-direction: column;
  font-weight: bold;
}
@media (max-width: 500px) {
  .inline-block-buttons {
    flex-direction: column;
  }
  .inline-block-buttons a{
    margin: 1rem;
  }
}

<body>
<p class="inline-block-buttons">
  Text 1
  <a>Text 2</a>
</p>
</body>

赞(0）回复(0）举报 2023-06-25

我来回答

css 盒内的Flex盒

2条答案

相关问题

热门标签

最新问答