英文:
Flex box inside a box
问题
- 将内部框与外部框的中心右侧对齐是我的问题之一。
- 使用 flexbox 将内部框变成一个“行”，并在较小的显示屏上移到外部框的底部是我的问题之二。
<p class="inline-block-buttons">
文本1
<a>文本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;
}
}
英文:
I'm trying to fit a box inside a box, where the layout changes depending on the screen size e.g. if under 400px.
I'm having trouble at two points:
- Aligning the inner box to the centre right of the outer box and
- Using flexboxes to make the inner box into a 'row' and fall to the bottom of the outer box on smaller displays
<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;
}
答案1
得分: 0
以下是您要翻译的代码部分：
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>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
}
<!-- language: lang-html -->
<body>
<p class="inline-block-buttons">
Text 1
<a>Text 2</a>
</p>
</body>
<!-- end snippet -->
答案2
得分: 0
以下是您要翻译的内容：
尝试这个：
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-css -->
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;
}
}
<!-- 语言：lang-html -->
<div class="inline-block-buttons">
<p>Text 1</p>
<a class="inline-block-buttons">Text 2</a>
</div>
<!-- 结束代码片段 -->
请注意，我已经保留了代码部分的原始标记，以便您可以在需要时使用它们。
英文:
Try this :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
}
<!-- language: lang-html -->
<div class="inline-block-buttons">
<p>Text 1</p>
<a class="inline-block-buttons">Text 2</a>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论