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

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

这是我想要的效果:

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条回答 默认 最新

  • 管那么多 2022-11-02 13:50
    关注

    闭合标签什么的都乱了,整理了下,然后你看看,还不行的话,你咖啡的图片发一张出来,我引代码里给你看看具体什么原因

    <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>
    
                        <div class="subcon">
                            <img src="images/Cappuccino.jpg" />
                            <div class="subtext">
                                <h1>卡布奇诺Cappuccino</h1>
                                <p>这款咖啡沿袭传统技法,由我们技艺娴熟的咖啡吧员将手工制作的热奶与细腻奶泡轻柔地浇在浓缩咖啡之上制作而成。</p>
                            </div>
                        </div>
    
                        <div class="subcon">
                            <img src="images/Mocha.jpg" />
                            <div class="subtext">
                                <h1>摩卡Caffè Mocha</h1>
                                <p>这款咖啡由醇香的摩卡酱,浓缩咖啡和蒸奶相融相合,上面覆以搅打奶油。
                                    寒冷的日子里,忧伤的时光中,任何人都无法抵抗她的诱惑。</p>
                            </div>
                        </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>
            </div>
        </body>
        </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 u盘问题:盘符不显示 无媒体
  • ¥50 R语言读取nc按月均值转为tif
  • ¥30 智能车串级pid调参
  • ¥15 visual studio code翻译老是错误
  • ¥20 卫星测高数据的高程转换
  • ¥15 爬取招聘网站数据信息
  • ¥15 安装完tensorflow,import tensorflow as tf后报错,如何解决?
  • ¥15 ultralytics库导出onnx模型,模型失去预测能力
  • ¥15 linux下点对点协议连接2个USB串口的硬件流量控制问题
  • ¥15 SQL数据自动生成问题