有人可以瞅瞅为什么右边的几个图不能向上吗？

Question

<div class="content">
        <ul class="nav-s">
            <li>popular</li>
            <li>newarrivals</li>
            <li>best</li>
            <li>offers</li>
            <li>comingsoon</li>
        </ul>
        <div class="photo">
            <div class="half">
                <div class="photo1" style="margin-right: 20px;">
                    <span>$88.88</span>
                    <img src="../img/photo1.png" alt="">
                </div>
                <div class="photo1">
                    <span>$88.88</span>
                    <img src="../img/photo1.png" alt="">
                </div>
                <div class="photo1" style="width: 100%;margin-top: 20px;">
                    <span>$88.88</span>
                    <img src="../img/photo2.png" alt="">
                </div>
            </div>
            <div class="half" style="float: right;">
                <div class="photo1" style="width:100%;margin-bottom:20px;">
                    <span>$88.88</span>
                    <img src="../img/photo2.png" alt="">
                </div>
                <div class="photo1" style="margin-right:20px;">
                    <span>$88.88</span>
                    <img src="../img/photo1.png" alt="">
                </div>
                <div class="photo1" style="">
                    <span>$88.88</span>
                    <img src="../img/photo1.png" alt="">
                </div>
            </div>
        </div>
    </div>

.content{
    width: 1294px;
    height: 1040px;
    margin: 44px auto;
    border-top:2px solid #f7f7f7;
    border-bottom:2px solid #f7f7f7;
}
.content .nav-s{
    width: 100%;
    height: 90px;
    line-height: 90px;
    font-size: 10px;
}
.content .nav-s li{
    width: 110px;
    text-align: left;
    float: left;
    cursor: pointer;
}
.content .nav-s li:hover{
    color: aqua;
}
.content .photo{
    width: 100%;
    height:  950px;
}
.content .photo .half{
    width: 49%;
    height: 100%;
}
.content .photo .half .photo1{
    width: 300px;
    height: 365px;
    float: left;
    position: relative;
}
.content .photo .half .photo1 span{
    position: absolute;
    top: 10px;
    left: 10px;
    color: #A49D9E;
    font-size: 11px;
}

![img]( https://img-mid.csdnimg.cn/release/static/image/mid/ask/773790714826116.png https://img-mid.csdnimg.cn/release/static/image/mid/ask/773790714826116.png 'QQ截图20210808180439.png'

Answer 1

方法一：给第一个 half 添加左浮动的样式

<div class="half" style="float: left;"></div>

方法二：给 half 添加"display: inline-block;"的样式

.content .photo .half{
    display: inline-block;
}

方法三：改变布局方式，在photo上添加“ display: flex;”，使用flex进行布局（可以研究下比单纯的float布局舒服得多）
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

.content .photo{
    display: flex;
}