我有一些类似于右侧子菜单的窗格。在第一个div中单击2链接时,必须显示2 div。单击第二个div的第二个(或任何元素)元素时,第三个div必须显示
我尝试了类似的东西(截至目前所有div是display:block



<html>
    <head>
        <style>

        </style>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <style>
        .my_class {
             height:200px;
             width:100px;
             border:1px solid;
             float:left;
             position:absolute;
        }
        </style>

    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-2">
                    <div class="my_class">
                        <ul>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                        </ul>

                    </div>
                    <div class="my_class">
                        <p><a href="#">Something2</a></p>
                        <p><a href="#">Something2</a></p>
                        <p><a href="#">Something2</a></p>
                        <p><a href="#">Something2</a></p>
                        <p><a href="#">Something2</a></p>
                    </div>
                    <div class="my_class">
                        <p><a href="#">Something2-1</a></p>
                        <p><a href="#">Something2-1</a></p>
                        <p><a href="#">Something2-1</a></p>
                        <p><a href="#">Something2-1</a></p>
                        <p><a href="#">Something2-1</a></p>
                    </div>
                    <div class="my_class">
                        <p><a href="#">Something2-1-1</a></p>
                        <p><a href="#">Something2-1-1</a></p>
                        <p><a href="#">Something2-1-1</a></p>
                        <p><a href="#">Something2-1-1</a></p>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>





有人可以帮助我纠正对齐问题吗?
子菜单实际上向右走了4次。它应该一一对齐。

最佳答案

您可以执行以下操作:将类cl-xs-2更改为cl-md-3。并删除position:absolute; and left:100%;display
请注意,我看到您的重复样式的高度,宽度等很多。
您可以将set类设置为所有这些div,并具有一个css规则来设置所有div的属性。

Take a look at this我刚刚找到了它,但是它看起来像一个不错的教程。



<html>

<head>
  <style>
  </style>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>



</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div style="height:200px;width:100px;border:1px solid;float:left;">
          <ul>
            <li><a href="#">1</a>
            </li>
            <li><a href="#">2</a>
            </li>
            <li><a href="#">3</a>
            </li>
            <li><a href="#">4</a>
            </li>
          </ul>

        </div>
        <div style="height:200px;width:100px;border:1px solid;float:left;">
          <p><a href="#">Something2</a>
          </p>
          <p><a href="#">Something2</a>
          </p>
          <p><a href="#">Something2</a>
          </p>
          <p><a href="#">Something2</a>
          </p>
          <p><a href="#">Something2</a>
          </p>
        </div>
        <div style="height:200px;width100px;border:1px solid;float:left;">
          <p><a href="#">Something2-1</a>
          </p>
          <p><a href="#">Something2-1</a>
          </p>
          <p><a href="#">Something2-1</a>
          </p>
          <p><a href="#">Something2-1</a>
          </p>
          <p><a href="#">Something2-1</a>
          </p>
        </div>
        <div style="height:200px;width100px;border:1px solid;float:left;">
          <p><a href="#">Something2-1-1</a>
          </p>
          <p><a href="#">Something2-1-1</a>
          </p>
          <p><a href="#">Something2-1-1</a>
          </p>
          <p><a href="#">Something2-1-1</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

关于javascript - 动态右 Pane 样式问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32182364/

10-12 13:01
查看更多