动态右窗格样式问题

  • Z时代
  • 2024-01-10
  • 分类：问答

我有类似右子菜单的窗格。当点击第一个div中的2个链接时，必须显示2个div。当点击来自第二格3格2日（或任何元素）元素必须证明 我想是这样（截至目前的所有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 < - 不需要那些东西。

注意我看你重复的样式很多高度，宽度等
你可以setta类所有这些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>

以上是 动态右窗格样式问题 的全部内容， 来源链接： utcz.com/qa/259391.html

回到顶部