我在父类wrapped_inside下主要有3个div。我想在一行中对齐所有3个div。一个位于极左和右两端的两个div的中间休息处。下面的代码在除IE之外的所有浏览器中都能正常工作。
请注意,下面的css和html页面是更大的html的一部分。我只复制了下面附带的演示示例的重要部分。
.wrapped_inside div:nth-child(3) {
position: relative;
display: block;
}
.wrapped_inside div:nth-child(3) div:nth-child(1) {
float: left;
padding-top: 5px;
}
.wrapped_inside div:nth-child(3) div:nth-child(2) {
padding: 10px;
position: absolute;
left: 50%;
}
.wrapped_inside div:nth-child(3) div:nth-child(3) {
// left: 0%;
float: right;
padding-top: 5px;
}
<div class="wrapped_inside">
<div class="arw"></div>
<div class="arw"></div>
<div class="arw">
<div class="type-4">
<div id="one">footer text1</div>
</div>
<div class="type-2">
<div class="two">
<a href="javascript:void(0)">
<span >text2
</span>
</a>
</div>
</div>
<div class="type-6">
<div >
<a href="#">
<span class="menu-left">0</span>
</a>
</div>
</div>
</div>
</div>
答案 0 :(得分:3)
删除此div <div class="col-sm-6"></div>
.wrapped_inside div:nth-child(3) {
position: relative;
display: block;
}
.wrapped_inside div:nth-child(3) div:nth-child(1) {
float: left;
padding-top: 5px;
}
.wrapped_inside div:nth-child(3) div:nth-child(2) {
padding: 10px;
position: absolute;
left: 50%;
}
.wrapped_inside div:nth-child(3) div:nth-child(3) {
// left: 0%;
float: right;
padding-top: 5px;
}
<div class="wrapped_inside">
<div class="arw"></div>
<div class="arw"></div>
<div class="arw">
<div class="type-4">
<div id="one">footer text1</div>
</div>
<div class="type-2">
<div class="two">
<a href="javascript:void(0)">
<span >text2
</span>
</a>
</div>
</div>
<div class="type-6">
<div >
<a href="#">
<span class="menu-left">0</span>
</a>
</div>
</div>
</div>
</div>