Question

我有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>

Answer 1

我决心将浮动向左和向右移动。感谢您的回答！

Answer 2

您可以考虑使用网格。

.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>

Answer 3

使用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>

位置横幅

3 个答案: