将div对齐一行,极左,中,极右

时间:2016-06-22 06:30:32

标签: jquery html css

我在父类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>

1 个答案:

答案 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>