友友们，可以帮我看一下这个问题应该怎么解决吗？

这是我想要的效果：

图文在一行排列。
这是我做出来的效果：

这是我的代码：

<DOVTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>综合案例</title>
   <style>

   *{
     padding:0;
     margin:0;
   }
    
   #container{
               width:900px;
    
               margin:0 auto;
              
              }

    #header{
         width:900px;
         height:250x;
          margin-bottom:5px;
        

          }
    

    #header img{
              width:900px;
              height:250px;
              margin-bottom:5px;
            

              }



    #nav{
        width:900px;
        height:30px;
        background-color:#3399CC;
        margin-bottom:5px;
        text-align:center;
        line-height:30px;
        

    }

    #nav a{
           
          font-size:18px;
          letter-spacing: 2px;
          text-decoration:none;
}


     a:link{
         color:white;
       }


     a:visited{
            color:white;
      }

     a:hover{
          color:yellow;
     }

     a:active{
           color:yellow;
     }



    #main{
          height:900px;
          width:900px;
          margin-bottom:5px;
    }

    


    #aside{
           float:left;
           width:295px;
           height:600px;
           margin-right:5px;
           background-color:#00CCFF;
           
    }

    
    #content{
            float:left;
            width:600px;
            height:900px;
            background-color:#66FFFF;
        }
  
   .subcon{
           width:500px;
           
           margin:10px auto;
           clear:both;
            /*这一步清理浮动是因为在content这个盒子中设置了浮动，
             而对于content下的子盒子subcon中的图片我们希望它能够向左浮动，就必须要清理浮动，
             让后面要设置的浮动的元素不受content浮动元素的影响
            */         
   }
    


   .subcon img{
               float:left;
               padding:10px;
               margin:5px;
              border:1px dashed;

            }



   .subcon .subtext{/*这里的 .subcon .subtext是因为subtext是在subcon这个盒子里面。
                    而subtext本身也是四个盒子，所以这里的设置是对于盒子的设置*/
                   width:60%;
                   margin:5px;
                  color:#996600;
                   float:right;            
                 }
   
   .subtext h1{
              
               margin:5px;
   }
  
   .subtext p{
              font-size:16px;
         }

    }

   #footer{
           width:900px;
           height:50px;
           background-color:#3399CC;
           text-align:center;
           line-height:50px;
         }

   #footer p{
             font-size:17px;
             color:white;
         
            

   }










  </style>
 

 </head>
 <body>
  <div id="container">
   <div id="header">
       <img src="images/banner.jpg" />
   
  
   </div>


   <div id="nav">
       <a href="#">咖啡MENU</a>
       <a href="#">咖啡COOK</a>
       <a href="#">咖啡STORY</a>
       <a href="#">咖啡NEWS</a>
       <a href="#">咖啡PARTY</a>
   </div>


   <div id="main">
    <div id="aside"></div>

    <div id="content">
      <div class="subcon">
       <img src="images/Latte.jpg" />
       <div class="subtext">
        <h1>拿铁Caffè Latte</h1>
        <p>这是一种传统的经典饮料——浓缩咖啡调入热牛奶,其上覆盖一层轻盈的奶沫。
           品尝此款咖啡时，您可以选择特别加入某种口味（如香草，焦糖或杏仁口味的糖浆</p>
        </div>

      <div class="subcon">
       <img src="images/Cappuccino.jpg" />
       <div class="subtext">
        <h1>卡布奇诺Cappuccino</h1>
        <p>这款咖啡沿袭传统技法，由我们技艺娴熟的咖啡吧员将手工制作的热奶与细腻奶泡轻柔地浇在浓缩咖啡之上制作而成。</p>
        </div>

      <div class="subcon">    
       <img src="images/Mocha.jpg" />
       <div class="subtext">
        <h1>摩卡Caffè Mocha</h1>
        <p>这款咖啡由醇香的摩卡酱，浓缩咖啡和蒸奶相融相合，上面覆以搅打奶油。
           寒冷的日子里，忧伤的时光中,任何人都无法抵抗她的诱惑。</p>
        </div>

      <div class="subcon">    
       <img src="images/Espresso.jpg" />
       <div class="subtext">
        <h1>浓缩咖啡Espresso</h1>
        <p>这是咖啡的精粹，以最浓缩的方式显现。浓缩咖啡带点焦糖味道，浓厚馥郁。</p>
      </div>
     </div>
    </div>



   </div>


   <div id="footer">
       <p>网站设计课程版权2015-2020</p>
   </footer>






  </div>
 </body>
</html>