我试图让“div”在 @media query max-width 321px
上的另一行继续,但在桌面上保持相同的设计,我试图 float : left
并将 .aboutBox
设置为 width: 100%
但仍然没有成功。
这是我想为移动设备实现的目标:imgur.com/byoafCc 然而,这是在桌面 css 上发生的事情:imgur.com/tSwOJI4
HTML
<div id="aboutContainer">
<div class="aboutBox">
<h2>WHAT IS SHARPTURN NETWORK</h2>
<p>Sharpturn Network is a multi marketing platform that specialises in advertisement and promotion.</p>
<h2>HOW DID IT START</h2>
<p>Ryan Williams and Dan Lewandowski began building the business plan, brand design and website layout in 2014 and it was given a huge reconstruction in early 2016 with a more mature
approach.</p>
</div>
<div class="aboutBox">
<h2>WHAT IS SHARPTURN NETWORK</h2>
<p>Sharpturn Network is a multi marketing platform that specialises in advertisement and promotion.</p>
<h2>HOW DID IT START</h2>
<p>Ryan Williams and Dan Lewandowski began building the business plan, brand design and website layout in 2014 and it was given a huge reconstruction in early 2016 with a more mature
approach.</p>
</div>
</div>
桌面 CSS:
#aboutContainer {
display: flex;
width: 100%;
height: 400px;
margin: auto;
background-color: #505050;
border-top: 1px solid #000;
}
.aboutBox {
float: left;
width: 50%;
height: 600px;
}
.aboutBox h2 {
letter-spacing: 1.2px;
font-size: 26px;
color: #fff;
margin-left: 50px;
padding-top: 25px;
padding-bottom: 10px;
}
.aboutBox p {
color: #fff;
padding-left: 100px;
padding-right: 100px;
font-size: 22px;
line-height: 1.2em;
font-weight: 200;
}
移动 CSS:
#aboutContainer {
float: left;
width: 100%;
height: 800px;
background-color: #505050;
border-top: 1px solid #000;
}
.aboutBox {
width: 100%;
height: 800px;
}
.aboutBox h2 {
font-family: 'Questrial',sans-serif;
padding-left: 10px;
font-size: 17px;
color: #fff;
}
.aboutBox p {
color: #fff;
padding-left: 20px;
padding-right: 15px;
font-size: 15px;
font-weight: 200;
}
最佳答案
你可以试试这个:
在这个演示中是移动添加 display:inline-block;
在这个 id
文件 #aboutContainer
#aboutContainer {
display: flex;
width: 100%;
height: auto;
margin: auto;
background-color: #505050;
border-top: 1px solid #000;
display:inline-block;
}
.aboutBox {
float: left;
width: 100%;
height: auto;
}
.aboutBox h2 {
letter-spacing: 1.2px;
font-size: 26px;
color: #fff;
margin-left: 50px;
padding-top: 25px;
padding-bottom: 10px;
}
.aboutBox p {
color: #fff;
padding-left: 100px;
padding-right: 100px;
font-size: 18px;
line-height: 1.2em;
font-weight: 200;
text-align:justify;
}
和
桌面演示
#aboutContainer {
display: flex;
width: 100%;
height: auto;
margin: auto;
background-color: #505050;
border-top: 1px solid #000;
}
.aboutBox {
float: left;
width: 50%;
height: auto;
}
.aboutBox h2 {
letter-spacing: 1.2px;
font-size: 18px;
color: #fff;
margin-left: 50px;
padding-top: 25px;
padding-bottom: 10px;
}
.aboutBox p {
color: #fff;
padding-left: 100px;
padding-right: 10px;
font-size: 14px;
line-height: 1.2em;
font-weight: 200;
}
抱歉我的英语不好
关于html - 让 div 换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35217293/