请问一下大家怎么让图片在文字旁边显示啊，在尽量不修改我现在有关除了放图片的盒子的代码的前提下

<div class="box">
            <ul>
                <li>_______ 关于我们 ______</li>
                <p>ABOUT US</p>
                <div class="info">千库网有限公司
                    <li>书已经走进了千家万户，人们读书也没有像“悬梁刺股”那样夸张了。<br/>
            但读书的精神还是在我们这一代渊源流淌：学校开办图书馆，办起了各种各样的<br/>
            图书交流活动；甚至有些图书馆还特意的举办了图书漂流活动、图书跳蚤市场<br/>
            等别出心裁的活动，这难道不是现代人推广读书传统的表现么？或许有的人，<br/>
                说读书是没有什么大用处的，以为读书就是读书，读完了没有任何收获，甚至<br/>
                有的人连书里面的内容都读的朦朦胧胧、张冠李戴。我想告诉这些人，读书，<br/>
                必须要报以一种用心灵去读的心态细细地品味书里真正的内容的意义！做到“<br/>
                眼到、心到、手到、脑到、嘴到！”这样，读完书才会有一种“满载而归”的<br/>
                喜悦！“读书破万卷，下笔如有神。”</li>
                    <li>中华五千年也离不开书，我们这一代一定要把书香传统发扬光大，让更多<br/>
                    人从中受益，让书香弥漫每个人的人生！</li>
                    <li1>更多&gt;&gt;</li1>
                    <div class="w"></div>
                </div>
            </ul>   
        </div>


.box{
    float: left;
    height: 688px;
    background-color: white;
}
.box ul li{
    font-size: 35px;
    color: #595959;
    margin-top: 110px;
    margin-left: 650px;
}
.box ul p{
    font-size: 20px;
    color: #595959;
    margin-top: 10px;
    margin-left: 790px;
}
.box .info{
    font-size: 20px;
    color: #595959;
    margin-top: 110px;
    margin-left: 200px;
}
.box .info li{
    font-size: 15px;
    color: #595959;
    margin-top: 10px;
    margin-left: 3px;
    text-indent:2em;
}
.box .info li1{
    font-size: 15px;
    color: white;
    background-color: #ff812a;
}
.box .w{
    float: right;
    background: url('4182.png') no-repeat top center; 
    height:400px;
    width:650px;
    margin-left: 600px;
    margin-bottom:800px;

}

我希望的效果是这样

img
但我自己做出的效果却是这样

img
我觉得很可能是图片在下面的那一行盒子里但是我设置了浮动为啥没浮到上面那行盒子那里啊

  1. html代码太乱
  2. css代码太乱
    要改几乎就重写了

可适配行太差，建议重构，盒子模型太乱，这个页面内容其实不需要这么多的样式就可以完成，你这种太乱了
盒子这样弄个就会显着很好弄了

img

display:flex就好了

html和css有点乱，重构了一下。布局细节自己写吧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.5.1.min.js" ></script>
 <style>
.bigbox{
    background-color: white;
    height: 668px;
    border: 1px solid red;
}
.about{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    border: 1px solid green;
}
.smallbox{
    display: flex;    
}
.left,.right{
    flex:1;
    height: 400px;
    border: 1px solid blue;
}
    </style>
</head>
<body>
<div class="bigbox">
    <div class="about">关于我们</div>
    <div class="smallbox">
        <div class="left">文字</div>
        <div class="right">图片</div>
    <div>
</body>
    <script>

    </script>
</html>

你在写页面的时候。要把整个页面看成是一个大盒子，大盒子里面又包含着各种各样的小盒子，这样层层嵌套，知道哪些小盒子在哪个大盒子里面，这样就不会乱