如何使文本+按钮响应

Question

如果屏幕像素宽度为<= 664px，我想让按钮位于文本下方。如果你不清楚我的意思，这里有一个图片链接，我希望这对你有帮助。我想让它有响应。我尝试了一些方法，但都没用。有人有什么主意吗?

.main {
flex: 63%;
background-color: white;
}
.main-box {
background-color: #ffffff;
height: 130px;
display: table;
width: 798px;
border-right: solid;
border-left: solid;
border-bottom: solid;
border-color: #E6E6E6;
}
.text-in-main-box{
font-weight: bold;
font-family: rob;
width: 60%;
padding: 7%;
display: table-cell;
vertical-align: middle;
}
.container-for-button-in-main-box{
width: 40%;
display: table-cell;
vertical-align: middle;
height: 100%;
}
.button-in-main-box{
display:inline-block;
padding:0.8em 1.2em;
margin:0 0.3em 0.3em 0;
border-radius:4em;
box-sizing: border-box;
text-decoration:none;
font-family:rob;
font-weight:bold;
color:#ffffff;
background-color:#34E034;
text-align:center;
transition: all 0.2s;
}
.button-in-main-box:hover{
transform: scale(1.1);
}

<div class="main-box">
<div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
<div class="container-for-button-in-main-box"><span class = button-in-main-box>Löse Aufgabe</span></div>
</div>

Answer 1

Go for media-query@media only screen and (max-width: 664px)

.main {
flex: 63%;
background-color: white;
}
.main-box {
background-color: #ffffff;
height: 130px;
display: table;
width: 798px;
border-right: solid;
border-left: solid;
border-bottom: solid;
border-color: #E6E6E6;
}
.text-in-main-box {
font-weight: bold;
font-family: rob;
width: 60%;
padding: 7%;
display: table-cell;
vertical-align: middle;
}
.container-for-button-in-main-box {
width: 40%;
display: table-cell;
vertical-align: middle;
height: 100%;
}
.button-in-main-box {
display: inline-block;
padding: 0.8em 1.2em;
margin: 0 0.3em 0.3em 0;
border-radius: 4em;
box-sizing: border-box;
text-decoration: none;
font-family: rob;
font-weight: bold;
color: #ffffff;
background-color: #34E034;
text-align: center;
transition: all 0.2s;
}
.button-in-main-box:hover {
transform: scale(1.1);
}
@media only screen and (max-width: 664px) {
.main-box {
width: 100%;
max-width: 798px;
display: flex;
flex-direction: column;
height: auto;
}
.text-in-main-box {
width: 100%
padding: 7% 0;
text-align: center;
}
.container-for-button-in-main-box {
width: 100%;
display: flex;
justify-content: center;
}
}

<div class="main-box">
<div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
<div class="container-for-button-in-main-box"><span class=button-in-main-box>Löse Aufgabe</span></div>
</div>

您的解决方案的完整flex实现将如下所示:

.main-box {
background-color: #ffffff;
height: 130px;
display: flex;
width: 798px;
border-right: solid;
border-left: solid;
border-bottom: solid;
border-color: #E6E6E6;
}
.text-in-main-box {
font-weight: bold;
font-family: rob;
width: 60%;
padding: 7%;
display: flex;
vertical-align: middle;
}
.container-for-button-in-main-box {
width: 40%;
display: flex;
vertical-align: middle;
/* height: 100%; */
flex-direction: column;
align-items: center;
justify-content: center;
}
.button-in-main-box {
display: inline-block;
padding: 0.8em 1.2em;
margin: 0 0.3em 0.3em 0;
border-radius: 4em;
box-sizing: border-box;
text-decoration: none;
font-family: rob;
font-weight: bold;
color: #ffffff;
background-color: #34E034;
text-align: center;
transition: all 0.2s;
}
.button-in-main-box:hover {
transform: scale(1.1);
}
@media only screen and (max-width: 664px) {
.main-box {
width: 100%;
max-width: 798px;
display: flex;
flex-direction: column;
height: auto;
}
.text-in-main-box {
width: 100%;
padding: 7% 0;
justify-content: center;
}
.container-for-button-in-main-box {
width: 100%;
display: flex;
justify-content: center;
}
}

<div class="main-box">
<div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
<div class="container-for-button-in-main-box"><span class=button-in-main-box>Löse Aufgabe</span></div>
</div>

Answer 2

使用@media query。使用它，你可以应用自定义css属性到你的网站，当一个特定的条件是true(在你的例子中max-width: 664px)

这里有一个教程:

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

的例子:

@media screen and (max-width: 664px) {

.button-in-main-box{
background-color: green;
}
}

Answer 3

为按钮前的文本关闭div。请使用此代码&

<div class="main-box">
<div class="text-in-main-box">Sage “Hallo, Welt" mit Python
<div class="container-for-button-in-main-box"><span class = button-in-main-box>Löse Aufgabe</span></div>
</div>
</div>