如何创建一个CSS,使我的内容在屏幕的左边,我把垂直的广告感放在右边,然而,页面在智能手机上打开,广告横幅在我的内容下面移动?


发布于 2021-07-24 17:20:02
您应该首先了解响应Web设计。
根据这一点,有许多方法可以使页面响应。Flexbox, Grid, MediaQueries & ...
结果:如您所见,如果两个框的总宽度将超过520px,那么它将进入一个新的行。
const check = () => {
let firstBoxInput = document.querySelector('.first-child-width').value;
let secondBoxInput = document.querySelector('.second-child-width').value;
const firstBox = document.querySelector('.first-child');
const secondBox = document.querySelector('.second-child');
firstBox.style.width = `${firstBoxInput}px`;
secondBox.style.width = `${secondBoxInput}px`;
};
document.querySelector('button').addEventListener('click', check);* {
margin: 0;
padding: 0;
box-sizing: border-box
}
.container {
display: flex;
flex-wrap: wrap;
width: 520px;
border: 1px solid black
}
.container .first-child {
display: flex;
align-items: center;
justify-content: center;
background-color: orange;
border: 1px solid black;
width: 300px;
height: 300px
}
.container .second-child {
display: flex;
align-items: center;
justify-content: center;
background-color: green;
border: 1px solid black;
width: 200px;
height: 300px
}<input type="number" class="first-child-width" placeholder="First Box Width in px">
<input type="number" class="second-child-width" placeholder="Second Box Width in px">
<button type="button">Click</button>
<section class="container">
<article class="first-child">First Child</article>
<article class="second-child">Second Child</article>
</section>
发布于 2021-07-24 17:32:33
媒体查询可用于检查许多事情,如:
使用媒体查询是向台式机、膝上型计算机、平板电脑和移动电话提供量身定做的样式表的流行技术。
.container{
display: flex;
flex-direction: row;
}
.text{
text-align: justify;
padding: 0 10px;
}
.adsense{
width:100px;
background-color:#666;
color:#ffffff;
}
@media (max-width: 600px) {
.container{
flex-direction: column;
}
.adsense{
margin-top:20px;
width:100%;
height:200px;
background-color:#666;
color:#ffffff;
}
}<div class="container">
<div class='text'>
<h3>My Content</h3>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class='adsense'>
adsense
</div>
</div>
https://stackoverflow.com/questions/68512111
复制相似问题