桑桑不会写程序 2022-11-02 11:56 采纳率: 100%
浏览 48
已结题

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

这是我想要的效果:

img


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

img

这是我的代码:

<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>

我想请问一下大家我写的subtext样式那一部分哪里有问题哇,以及怎么修改雅。谢谢大家了

  • 写回答

3条回答 默认 最新

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 11月12日
      • 已采纳回答 11月4日
      • 创建了问题 11月2日

      悬赏问题

      • ¥20 python跨服务器实现复制 ,剪切的功能需求
      • ¥15 R语言,单因素cox检验,时间分层后,使用coz.zph()函数再次ph假设检验时报错,如何解决?
      • ¥15 关于#C语言冒泡排序型#的问题,如何解决?
      • ¥15 如何预处理存在负值的样本数据,使其能够全都成为正的
      • ¥15 SW画图拖影,平滑处理如何关闭
      • ¥15 请问怎么通过css改变图片颜色
      • ¥15 c语言文件读取到结构体以及写入
      • ¥15 Blender: auto rig pro骨骼动画导出后变形穿模
      • ¥15 C51单片机的设计思路哈
      • ¥15 Linux脏牛提权漏洞