文章/答案/技术大牛

发布

问位置横幅
EN

Stack Overflow用户

提问于 2018-10-16 12:33:54

回答 3查看 74关注 0票数 0

我有3个横幅，我想做这样的：，不使用绝对位置(我想使用相对位置，因为当我把页脚，页脚是交错的)。我怎么能做到呢？

.bms {
  height: 810px;
  left: 0;
  position: absolute;
  width: calc(50.5% - 10px);
}

.bds {
  height: 400px;
  position: absolute;
  right: 0;
  width: 49.5%;
}

.bdj {
  height: 400px;
  position: absolute;
  right: 0;
  top: 417px;
  width: 49.5%;
}

<html>

<head></head>

<body>
  <img class="bms" src="https://.com//image//.png" alt="BMS">
  <img class="bds" src="https://.com////.png" alt="BDS">
  <img class="bdj" src="https://.com////jospng" alt="BDJ">
</body>

</html>

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-10-16 13:03:02

您可以考虑使用网格。

.wrapper {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.bms {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.bds {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.bdj {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

<div class="wrapper">
  <img class="bms" src="https://.com////.png" alt="BMS">
  <img class="bds" src="https://.com////.png" alt="BDS">
  <img class="bdj" src="https://.com////.png" alt="BDJ">
</div>

票数 0

Stack Overflow用户

发布于 2018-10-16 13:02:34

我决定把浮子放左和右。谢谢你的回答！

票数 0

Stack Overflow用户

发布于 2018-10-17 04:52:11

使用flex，您可以简单地实现这一点。所以不需要使用float。下面是一个例子。

.container{
    display: flex;
    width: 100%;
    margin:0;
    padding:0;
    height: 600px;
}
.left-banner{
    display: flex;
    width: 50%;
    height: 100%;
}
.left-banner img{
    width: 100%;
}
.right-banner{
    display: flex;
    width: 50%;
    height: 100%;
    flex-direction: column;
}
.right-up-banner{
    display: flex;
    width: 100%;
    height: 50%;
}
.right-up-banner img{
    width: 100%;
}
.right-down-banner{
    display: flex;
    width: 100%;
    height: 50%;
}
.right-down-banner img{
    width: 100%;
}
.footer{
    display: flex;
    width: 100%;
    background-color: #222;
    height: 200px;
    justify-content: center;
    align-items: center;
    color: #fff;
}

<div class="container">
  <div class="left-banner">
    <img src="https://.com////.png" alt="">
  </div>
  <div class="right-banner">
    <div class="right-up-banner">
      <img src="https://.com////.png" alt="">
    </div>
    <div class="right-down-banner">
      <img src="https://.com////.png" alt="">
    </div>
  </div>
</div>
<div class="footer">
  <h1>Footer</h1>
 </div>

票数 0

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

原文链接：

https://stackoverflow.com/questions/52835582

复制

相似问题

问位置横幅
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问位置横幅EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问位置横幅
EN