我有一些类似于右侧子菜单的窗格。在第一个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/