我的标签内容正在显示但不正确,第二个标签内容在屏幕中间移动了一半,我不知道为什么,这里是代码,感谢任何帮助。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="white-bg">
<li class="active"><a data-toggle="tab" href="#1-1" class="" aria-expanded="true">Overview</a>
</li>
<li class=""><a data-toggle="tab" href="#1-6" class="" aria-expanded="false">Miners</a>
</li>
</ul>
<div class="tabs-content">
<div id="1-1" class="tab-pane fade active in">
<div class="row" id="white-bg">
<div class="col-xs-3">
<div class="foodstuffs">
<p style="color:white;">Welcome to Dragon Fall Version 1.0. Curently there are some errors that I am in the process of fixing such as:</p>
<br>
<li style="color:white;">number of miners does not change the value they contribute</li>
<li style="color:white;">middle divider alignment</li>
<li style="color:white;">css is excessive</li>
<br>
<p style="color:white;">for now I only have two miners available. Later in developement this pane will contain food and water and other statistics. Thanks!
-Akmedrah</p>
</div>
</div>
<div class="col-xs-9">
<div class="row">
<div class="player-overview">
<div class="">
<span class="cclstone" id="stone" title="Curent Stone">0</span>
<span class="cclwood" id="wood" title="Curent Wood">0</span>
<span class="cclcopper" id="copper" title="Curent Copper">0</span>
<span class="ccliron" id="iron">0</span>
<span class="cclsilver" id="silver">0</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<div id="greenbox-l" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="greenbox-l" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="greenbox-l" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="greenbox-l-b" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
</div>
<div class="col-xs-2">
<div class="">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%;"> <span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
<div class="col-xs-5">
<div id="green-box-r" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="green-box-r" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="green-box-r" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="green-box-r-b" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
</div>
</div>
<div class="row">
<div class="player-overview">
<div class="">
<span class="cclcobalt" id="cobalt">0</span>
<span class="ccltitanium" id="titanium">0</span>
<span class="cclmithril" id="mithril">0</span>
<span class="ccladamantine" id="adamantine">0</span>
<span class="ccldraconium" id="draconium">0</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="1-6" class="tab-pane fade">
<div class="row" id="1-6fix">
<div class="col-xs-12" id="1-6fix">
<button>test</button>
</div>
</div>
</div>
</div>
&#13;
我对编程比较陌生,到目前为止,我已经耗尽了所有资源,因为我不知道为什么这不起作用。
答案 0 :(得分:1)
添加此css:
.fade.in {
display:block;
}
.fade {
display:none;
}
问题在于,淡入淡出只会使 div#1-1 的不透明度变为0,这意味着它不会被隐藏并占用页面上的空间。所以 div#1-6 被推倒了。
.fade.in {
display: block;
}
.fade {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="white-bg">
<li class="active"><a data-toggle="tab" href="#1-1" class="" aria-expanded="true">Overview</a>
</li>
<li class=""><a data-toggle="tab" href="#1-6" class="" aria-expanded="false">Miners</a>
</li>
</ul>
<div class="tabs-content">
<div id="1-1" class="tab-pane fade active in">
<div class="row" id="white-bg">
<div class="col-xs-3">
<div class="foodstuffs">
<p style="color:white;">Welcome to Dragon Fall Version 1.0. Curently there are some errors that I am in the process of fixing such as:</p>
<br>
<li style="color:white;">number of miners does not change the value they contribute</li>
<li style="color:white;">middle divider alignment</li>
<li style="color:white;">css is excessive</li>
<br>
<p style="color:white;">for now I only have two miners available. Later in developement this pane will contain food and water and other statistics. Thanks! -Akmedrah
</p>
</div>
</div>
<div class="col-xs-9">
<div class="row">
<div class="player-overview">
<div class="">
<span class="cclstone" id="stone" title="Curent Stone">0</span>
<span class="cclwood" id="wood" title="Curent Wood">0</span>
<span class="cclcopper" id="copper" title="Curent Copper">0</span>
<span class="ccliron" id="iron">0</span>
<span class="cclsilver" id="silver">0</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<div id="greenbox-l" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="greenbox-l" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="greenbox-l" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="greenbox-l-b" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
</div>
<div class="col-xs-2">
<div class="">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%;"> <span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
<div class="col-xs-5">
<div id="green-box-r" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="green-box-r" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="green-box-r" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
<div id="green-box-r-b" class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
<br class=""> <span id="wood" class="">testing</span>
</div>
</div>
</div>
<div class="row">
<div class="player-overview">
<div class="">
<span class="cclcobalt" id="cobalt">0</span>
<span class="ccltitanium" id="titanium">0</span>
<span class="cclmithril" id="mithril">0</span>
<span class="ccladamantine" id="adamantine">0</span>
<span class="ccldraconium" id="draconium">0</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="1-6" class="tab-pane fade">
<div class="row" id="1-6fix">
<div class="col-xs-12" id="1-6fix">
<button>test</button>
</div>
</div>
</div>
</div>