我有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>
答案 0 :(得分：0)
我决心将浮动向左和向右移动。感谢您的回答！
答案 1 :(得分：0)
您可以考虑使用网格。
.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>
答案 2 :(得分：0)
使用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>