为什么我的某些CSS规则不起作用？

一尘不染

为什么我的某些CSS规则不起作用？

css

我有一个嵌套的flexbox布局（使用bootstrapv4），可根据横向/纵向模式更改方向。第一层div（由flexbox使用该order属性放置）#no包含5个用作按钮的图标。order我无法在这些图标上正常使用该属性。

如果我不使用order属性，则图标将按照自然顺序进行布局；但是，如果我尝试使用该order属性对其进行布局，则无法正常工作。在代码中，info- div（order:3）应该是最后一个元素。不是。我可以通过更改源中的顺序来获得所需的顺序。但是，我想澄清一下我的误解。

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Portrait of New York</title>
      <style>
        html, body {
              width:100%;
              height:100%;
        }
        #container {
          height: 100%; width:100%;
          display: flex;    display: -webkit-flex;
          flex-wrap: nowrap;       -webkit-flex-wrap: nowrap;
          justify-content: center; -webkit-justify-content: center;
          align-items: center;   -webkit-align-items: center;
          align-content: space-between;   -webkit-align-content: space-between;
        }
        #no {
          padding: 1rem;
          display: flex; display: -webkit-flex;
          flex-wrap: nowrap;       -webkit-flex-wrap: nowrap;
          justify-content: space-between; -webkit-justify-content: space-between;
          align-items: center;   -webkit-align-items: center;
          align-content: space-between;   -webkit-align-content: space-between;
          flex: 1 1 auto; -webkit-flex: 1 1 auto;
        } 
        .icon {
          margin: auto;
          flex-grow:1;
          flex-basis: auto;
        }
        button:ACTIVE { // feedback on touch modal
          background: aqua;
        }       
        // next is for images
        .img { width: 8vmin; }
        // stuff living in #no
        #info-div1 {
          order: 3;        -webkit-order: 3;
        }
        #minus {
          order: 0;        -webkit-order: 0;          
        }
        #hb2 {
          order: -1;        -webkit-order: -1;
        }
        #plus {
          order: 1;        -webkit-order: 1;
        }
        #comment-button-div {
          order: 2;        -webkit-order: 2;
        }
      @media screen and (orientation: landscape ){
        #container { 
          flex-direction: row; -webkit-flex-direction: row;
        }
        #no { 
          flex-direction: column; -webkit-flex-direction: column;
          height: 100%;
          max-width: 10rem;
          order: 0;        -webkit-order: 0; 
        }
      }
      @media screen and (orientation: portrait ){
        #container { 
          flex-direction: column; -webkit-flex-direction: column;
        }
        #no {      
          flex-direction: row;   -webkit-flex-direction: row;
          max-height:10rem;
          width:100%;
          order: 2; -webkit-order: 2; 
        }
      }
   </style>
    <script src="https://www.google.com/recaptcha/api.js"
        async defer>
    </script>

 </head>

  <body>
    <div id="container">
      <div id='no'>

        <div id='minus' class="icon" title="Not special.">
          <a href="#" id="nHeart"  >
            <img class="img icon" src="http://gps-photo.org/images/Not.svg"/> 
          </a>
        </div>

        <div id="hb2" title="Login/Register/Uploads/Settings" class="btn-group icon">
          <div class="dropdown">
            <img class="dropdown-toggle img" src="http://gps-photo.org/images/cogwheel-525702-1.svg"  id="dropdownMenu1" 
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/>
            <div class="dropdown-menu">
              <a class="dropdown-item clr" data-toggle="modal" href="#myModal"></a>
              <a class="dropdown-item cup" data-toggle="modal" href="#myModal"></a>
              <a class="dropdown-item cmore" data-toggle="modal" href="#myModal">
              </a>
              <a class="dropdown-item cpony" data-toggle="modal" href="#myModal">
              </a>
              <a class="dropdown-item cabout" data-toggle="modal" href="#myModal"></a>
            </div>
          </div>
        </div><!-- end hb2 -->
        <div id='plus' class="icon" title="Loving it!">
          <a href="#" id="heart1" >
            <img class="img" src="http://gps-photo.org/images/red-304570-1.svg"/>
          </a>
        </div>

        <div id='comment-button-div' class="icon" title="Click for comments">
          <a class="comment-page" data-toggle="modal"  >
            <img class="img" id='comment-button' src="http://gps-photo.org/images/comments-97860-3.svg"/>
          </a>
        </div>

        <div id='info-div1' class="icon" title='Information' >
          <a class="info-page" data-toggle="modal" >
            <img id="info1" class="img" src="http://gps-photo.org/images/information-39064-2.svg"/>
          </a>
        </div>

      </div>
    </div>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>


 </body>
</html>

阅读 291

2020-05-16

共1个答案

一尘不染

CSS评论：`/* ... */`请勿使用`//...`或``

您遇到的问题与您的Flex代码无关。

问题是您使用 行注释语法 注释掉了文本，并且这不是有效的CSS。

button:ACTIVE { // feedback on touch modal
   background: aqua;
}

// next is for images
.img { width: 8vmin; }

因此，您实际上要做的是发布无效的代码，而不是注释掉该行，而是调用CSS错误处理，这会杀死下一条规则。换句话说，您之后的所有规则都会// text text text被忽略，就像您已执行以下操作一样：xheight: 50px。

这就是为什么order不适用于您的图标的原因：

// stuff living in #no
#info-div1 {
    order: 3;
    -webkit-order: 3;
}

坚持使用标准CSS注释方法。用发表评论/*。用结束评论*/。

/* stuff to be commented out */

一旦在代码中进行了调整，该order属性就可以正常工作（并且，如您所料，由于先前被忽略的代码，还会发生其他更改）。

最后，在单独的注释上：

您要在标准无前缀版本之后放置供应商前缀代码。

#container {
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;

    justify-content: center;
    -webkit-justify-content: center;

    align-items: center;
    -webkit-align-items: center;

    align-content: space-between;
    -webkit-align-content: space-between;
}

您应该考虑扭转这种情况。无前缀（W3C）版本应该排在最后，因此它始终是级联中的首选版本。

2020-05-16