首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在我的内容下创建广告横幅CSS?

如何在我的内容下创建广告横幅CSS?
EN

Stack Overflow用户
提问于 2021-07-24 17:00:49
回答 2查看 103关注 0票数 0

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-07-24 17:20:02

您应该首先了解响应Web设计

根据这一点,有许多方法可以使页面响应。Flexbox, Grid, MediaQueries & ...

  1. 我正在向您展示一个使用FlexBox的示例。
  2. 您也可以在这里阅读有关CSS网格的内容。
  3. 还有关于媒体查询的。

结果:如您所见,如果两个框的总宽度将超过520px,那么它将进入一个新的行。

代码语言:javascript
运行
复制
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);
代码语言:javascript
运行
复制
* {
  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
}
代码语言:javascript
运行
复制
<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>

票数 0
EN

Stack Overflow用户

发布于 2021-07-24 17:32:33

媒体查询可用于检查许多事情,如:

  • 视口的宽度和高度
  • 设备的宽度和高度
  • 定位(平板电脑/手机是在景观模式还是纵向模式?)
  • 分辨率

使用媒体查询是向台式机、膝上型计算机、平板电脑和移动电话提供量身定做的样式表的流行技术。

代码语言:javascript
运行
复制
.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;
  }
}
代码语言:javascript
运行
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68512111

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档