lajidafen
lajidafen
采纳率83.3%
2020-04-25 10:26

为何css中的display:block元素没有效果?

已采纳

html如图所示:

<html>
    <head>
        <title>打粉小站</title>
        <link rel="stylesheet" type="text/css"  href="css/home page_css.css">
    </head>

    <body>
        <div id="content">
            <div id="left_content">
                <div id="left_item1">
                  <p>
                  <a href="home page.html"><image src="image/logo.png">
                  </a></p>
                </div>
                <div id="left_item2">
                  <h1 id="subline">打粉小站</h1>
                  <h4><a href="home page.html">首页</a></h4>
                  <P>
                  <ul id="menu_bar1">
                    <li>站长小窝</li>
                    <li>小站社区</li>
                    <li>小站伊始(这里是提意见的地方哟)</li>
                    <li>随机页面</li>
                  </ul>
                  <hr/>
                  <ul id="menu_bar2">
                    <li>猪猪之家</li>
                  </ul>
                  <hr/>
                  <ul id="menu_bar3">
                    <li>宝可小小站</li>
                  </ul>
                  </P>

                </div>

            </div>

            <div id="right_content">
                <div id="navigation_bar">
                  <table>
                    <tr>
                      <td id="home_page" style="width:10%">首页</td>
                      <td id="discussion" style="width:10%">讨论</td>
                      <td id="conversion" style="width:10%">转换</td>
                      <td id="blank" style="width:45%">&nbsp;</td>
                      <td id="like" style="width:10%">点赞</td>
                      <td id="super_double" style="width:15%">超级加倍!</td>
                  </table>
                </div>
                <div id="greeting">
                  <table>
                    <tr>
                      <td id="greeting_imagea" rowspan="2" style="width:40%"><img src="image/欢迎语图.jpg" title="皮卡丘的幸福生活" id="greeting_image"/></td>
                      <td id="greetinga">欢迎来到我的小站~</td>
                    </tr>
                    <tr>
                      <td id="greeting2">小站需要大家共同的建设ya❤</td>
                    </tr>
                  </table>
                </div>
                <div id="main_content">
                    <div id="catalogue">
                      <h4 id="cataloguea">目录</h4>



<!--这里没有块级元素的特征:
                      <ol type="1" start="1">
                        <li>本站简介</li>
                          <ul>
                            <li>小站的成长</li>
                              <ul>
                                <li>创站目的</li>
                                <li>创站动因</li>
                                <li>小站规划</li>
                                <li>小站历程</li>
                                <li>小站未来</li>
                              </ul>
                            <li>小站是?</li>
                              <ul>
                                <li>小站形象</li>
                                <li>小站内容</li>
                              </ul>
                          </ul>
                        <li>小站支持</li>
                          <ul>
                            <li>技术支持</li>
                            <li>非技术支持</li>
                              <ul>
                                <li>资料来源</li>
                                <li>合作伙伴及联名商lalala</li>
                              </ul>
                          </ul>
                      </ol>
                    </div>
                                                                                                                        -->




                    <div id="synopsis">
                      <table>
                        <tr>
                          <td>あなたの名前は</td>
                          <td>相</td>
                    </div>
                    <div id="explanation">
                    <p>测试用zsucifzshfuszhfcisjzhefuihsjkv sdfrsgrg</p>
                    </div>
                </div>
            </div>

        </div>
    <footer>
    </footer>

    </body>

</html>

css代码如下:

#content{
    display:flex;
    width:100%;
}

  #left_content{
    width:15%;
    background-color:#F0F8FF;
    padding:10px;
}

    #subline{
    font:700 2.5em Serif;
    text-decoration:underline;
    text-align: center;
}

    ul#menu_bar1{
        list-style-image:url(../image/精灵球链接图.png);
    }

    ul#menu_bar2{
        list-style-image:url(../image/超级球链接图.png);
    }

    ul#menu_bar3{
        list-style-image:url(../image/高级球链接图.png);
    }


  #right_content{
    width:83%;
    background-image:url(../image/全家福背景图.jpg);
    background-attachment:fixed;
}

    #navigation_bar table{
        width:100%;
        height:30px;
        border:1px solid #000000;
        border-collapse:collapse;
        text-align:center;
        border-top-style:none;
        border-left-style:none;
        border-right-style:none;
        background-color:#F0FFFF;
    }

    #greeting{
        width:98%;
        margin:1%;
        border:1px solid red;
        border-radius:40px;
        background-color:#ff9999;
    }

      #greeting_imagea{
          text-align:center;
      }


      #greeting_image{
          width:35%;
      }

      #greetinga{
          text-align:left;
          font-size:25px;
      }

      #greeting2{
          font-size:15px;
          text-align:right;

      }

    #main_content{
    }

                                                        #catalogue{
                                                          border:1px solid #99ffcc;
                                                          background-color:#e5ffcc;
                                                          margin:1%;
                                                          float:left;
                                                          border-radius:30px;
                                                          padding:7px;
                                                          display:block;
                                                            **/*在这里*/**
                                                             }

      #cataloguea{
          text-align:center;
      }

      #synopsis{
          float:right;
      }

效果如下:

图片说明

我理解的是右边文字应该位于左边目录框下,左边目录框单站一行。
新手搞不懂哪里出错,猜想可能是css前面某些代码冲突?但是找不出来

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • Even_ycp 简_洋 1年前

    html代码你拿去吧,你没有给上面的浮动元素清除浮动,所以才会跑上去。不是说block不生效。而是生效了你看不出来。

        <div id="content">
            <div id="left_content">
                <div id="left_item1">
                    <p>
                        <a href="home page.html">
                            <image src="image/logo.png">
                        </a></p>
                </div>
                <div id="left_item2">
                    <h1 id="subline">打粉小站</h1>
                    <h4><a href="home page.html">首页</a></h4>
                    <P>
                        <ul id="menu_bar1">
                            <li>站长小窝</li>
                            <li>小站社区</li>
                            <li>小站伊始(这里是提意见的地方哟)</li>
                            <li>随机页面</li>
                        </ul>
                        <hr />
                        <ul id="menu_bar2">
                            <li>猪猪之家</li>
                        </ul>
                        <hr />
                        <ul id="menu_bar3">
                            <li>宝可小小站</li>
                        </ul>
                    </P>
    
                </div>
    
            </div>
    
            <div id="right_content">
                <div id="navigation_bar">
                    <table>
                        <tr>
                            <td id="home_page" style="width:10%">首页</td>
                            <td id="discussion" style="width:10%">讨论</td>
                            <td id="conversion" style="width:10%">转换</td>
                            <td id="blank" style="width:45%">&nbsp;</td>
                            <td id="like" style="width:10%">点赞</td>
                            <td id="super_double" style="width:15%">超级加倍!</td>
                    </table>
                </div>
                <div id="greeting">
                    <table>
                        <tr>
                            <td id="greeting_imagea" rowspan="2" style="width:40%"><img src="image/欢迎语图.jpg"
                                    title="皮卡丘的幸福生活" id="greeting_image" /></td>
                            <td id="greetinga">欢迎来到我的小站~</td>
                        </tr>
                        <tr>
                            <td id="greeting2">小站需要大家共同的建设ya❤</td>
                        </tr>
                    </table>
                </div>
                <div id="main_content">
                    <div id="catalogue">
                        <h4 id="cataloguea">目录</h4>
    
    
                        <ol type="1" start="1">
                            <li>本站简介</li>
                            <ul>
                                <li>小站的成长</li>
                                <ul>
                                    <li>创站目的</li>
                                    <li>创站动因</li>
                                    <li>小站规划</li>
                                    <li>小站历程</li>
                                    <li>小站未来</li>
                                </ul>
                                <li>小站是?</li>
                                <ul>
                                    <li>小站形象</li>
                                    <li>小站内容</li>
                                </ul>
                            </ul>
                            <li>小站支持</li>
                            <ul>
                                <li>技术支持</li>
                                <li>非技术支持</li>
                                <ul>
                                    <li>资料来源</li>
                                    <li>合作伙伴及联名商lalala</li>
                                </ul>
                            </ul>
                        </ol>
                    </div>
                    <div id="synopsis">
                        <table>
                            <tr>
                                <td>あなたの名前は</td>
                                <td>相</td>
                            </tr>
                        </table>
                    </div>
                    <div style="clear: both;"></div>
                    <div id="explanation">
                        <p>测试用zsucifzshfuszhfcisjzhefuihsjkv sdfrsgrg</p>
                    </div>
                </div>
            </div>
    
        </div>
        <footer>
        </footer>
    
    点赞 评论 复制链接分享
  • qq_28199467 夜空中最亮的那颗星 1年前

    #synopsis {
    clear: both;
    /* float: right; */
    }

    点赞 评论 复制链接分享

为你推荐