我的图片有问题。我想让4张图片看起来像这样： Image
但不幸的是，第4号图像位于其余部分之下并且粘贴在文档的左侧。我希望它坚持2号和3号。
这是我的代码：
<div id="images">
<div class="off1"><img src='img/off1.jpg' /></div>
<div class="off2"><img src='img/off2.jpg' /></div>
<div class="off3"><img src='img/off3.jpg' /></div>
<div class="off4"><img src='img/off4.jpg' /></div>
</div>
和css：
.off1
{
float: left;
display: block;
}
.off2
{
display: block;
}
.off3
{
display: block;
position: relative;
bottom: 3px;
}
.off4
{
display: inline-block;
}
感谢您的帮助！
答案 0 :(得分：1)
为图像div 2和3添加一个包装元素，使其成为1和4个浮点数并给出div 3 line-height: 0以避免2和3之间的差距：
答案 1 :(得分：0)
希望这会对你有所帮助。来源排序可能是一种负担（这就是.off4上/* added style for example only */
.off1 {
background-color: red;
height: 300px;
width: 100px;
}
.off2 {
background-color: #AAA;
width: auto;
height: 150px;
}
.off3 {
background-color: #ae5433;
width: auto;
height: 150px;
}
.off4 {
background-color: purple;
width: 100px;
height: 300px;
}
/* end added, example style */
#images {
position: relative;
}
.off1 {
float: left;
}
.off2,
.off3 {
width: auto;
}
.off4 {
position: absolute;
top: 0;
right: 0;
}很难做到的原因。但是，使用CSS总是有办法！
<div id="images">
<div class="off1">
<img src='img/off1.jpg' />
</div>
<div class="off2">
<img src='img/off2.jpg' />
</div>
<div class="off3">
<img src='img/off3.jpg' />
</div>
<div class="off4">
<img src='img/off4.jpg' />
</div>
</div>sanitize