CSS实现居中布局
方式一
# parent
text-align: center;
# child
display: inline-block;方式二(推荐)
display: block;
margin: 0 auto;方式一
# parent
position: relative;
# child
position: absolute;
left: 50%;
transform: translateX(-50%);垂直居中
(推荐)
display: flex;
align-items: center;(推荐)
display: table-cell;
vertical-align: middle;# parent
position: relative;
# child
position: absolute;
top: 50%;
transform: translate(-50%);水平和竖直方向都实现居中
display: flex;
justify-content: center;
align-items: center;两列布局
针对定宽自适应
margin-left
<style>
#parent {
width: 300px; height: 300px;
}
.left,.right {
height: 200px;
}
.left {
/*定宽*/
width: 100px;
float: left;
background-color: #A6E1EC;
}
.right {
margin-left: 100px;
background-color: #FAF2CC;
border: 1px #000000 solid;
}
</style>
</head>
<body>
<p>index</p>
<div id="parent">
<div class="left">
左
</div>
<div class="right_fix">
<div class="right">
右
</div>
</div>
</div>
</body>margin-left做优化
<style>
#parent {
width: 300px; height: 300px;
}
.left,.right {
height: 200px;
}
.left {
/*定宽*/
width: 100px;
float: left;
position: relative;
background-color: #A6E1EC;
}
.right_fix {
float: right;
width: 100%;
margin-left: -100px;
background-color: #DCA7A7;
}
.right {
border: 1px #000000 solid;
}
</style>
</head>
<body>
<p>index</p>
<div id="parent">
<div class="left">
左
</div>
<div class="right_fix">
<div class="right">
右
</div>
</div>
</div>
</body>BFC模式
只须使用overflow就可开启BFC模式
<style>
div {
height: 200px;
}
#left {
width: 400px;
background-color: #C9302C;
float: left;
}
#right {
background-color: #CCCCCC;
/* 开启BFC模式 */
overflow: hidden;
}
</style>
</head>
<body>
<p>index</p>
<div id="left">
左
</div>
<div id="right">
右
</div>
</body> <style>
div {
height: 200px;
display: table-cell;
}
#parent {
display: table;
table-layout: fixed;
width: 100%;
}
#left {
width: 200px;
background-color: #66AFE9;
}
#right {
background-color: #008000;
}
</style>
</head>
<body>
<p>index</p>
<div id="parent">
<div id="left">
左
</div>
<div id="right">
右
</div>
</div>
</body>Bootstrap分页
<!-- Start: 分页组件 -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="navbtn_first disabled">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<#list 1..(pageResult.totalPage)!0 as i>
<#if i==1><li class="active"><a href="#">${i!""}</a></li><#else>
<li><a href="#">${i!""}</a></li>
</#if>
</#list>
<#if pageResult.totalPage==1><li class="navbtn_last disabled"><#else>
<li class="navbtn_last">
</#if>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<span>${pageResult.items[0]}</span>
<script>
// TODO
$('.pagination li:not(li[class*="navbtn"])').on('click',function(){
var jsonData = {
key: null || "",
currentPage: $(this).text(),
rows: 2
};
$.ajax({
url: 'queryPage',
type: 'POST',
data: jsonData,
success: function(result){
//$('.table').html();
},
error: function(d,m){alert(m);}
});
console.log(jsonData);
// 当前选取的元素
$current = $('.pagination .active');
$current.attr("class","");
$(this).attr("class","active");
$('.pagination li[class^="navbtn"]').removeClass("disabled");
if($(this).text() && $(this).text()==$('.pagination li:not(li[class^=navbtn])').length){
$('.pagination li[class^="navbtn_last"]').addClass("disabled");
} else if($(this).text() && $(this).text()==1){
$('.pagination li[class^="navbtn_first"]').addClass("disabled");
}
});
$('.pagination li[class^="navbtn_first"]').click(function(){
let index = $('.pagination .active').text();
$($('.pagination li:not(li[class*="navbtn"])')[index-2]).trigger('click');
});
$('.pagination li[class^="navbtn_last"]').click(function(){
let index = $('.pagination .active').text();
$($('.pagination li:not(li[class*="navbtn"])')[index]).trigger('click');
});
</script>
<!-- End: 分页组件 -->
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。