Question

我在html页面的四个角有四个固定的div。我需要从右边重新排列顶部div。大约40个像素。我试过浮动，填充右，右边。没有一个适用于我.Below是我的HTML和CSS代码。

.top-bar a{
    padding-left:20px;
    float:right;
    right:50px;
    padding-top:7px;
}
.top-bar,.left-bar{
    top:0;
    left:0;
    
}
.top-bar i{
    text-align:right;
    
}
.right-bar{
    top:0;
    right:0;
}
.bottom-bar{
    bottom:0;
    left:0;
}
.top-bar,.bottom-bar{
    width:100%;
    height:40px;
    background-color: black;
    z-index:100;
    position:fixed;
}
.left-bar,.right-bar{
    height:100%;
    width:40px;
    background-color: black;
    z-index:100;
    position:fixed;
}

       <div class="left-bar"></div>
       <div class="right-bar"></div>
         <div class="top-bar">
             <div></div>
             <a href="#"><img src="images/social-youtube.png" alt="Subscribe Us"></a>  
              <a href="#"><img src="images/social-link.png" alt="Follow Us"></a>
              <a href="#"><img src="images/social-gplus.png" alt="Follow Us"></a>
              <a href="#"><img src="images/social-insta.png" alt="Follow Us"></a>
              <a href="#"><img src="images/social-pin.png" alt="Follow Us"></a>
              <a href="#"><img src="images/social-twitter.png" alt="Follow Us"></a>
             <a href="#"><img src="images/social-fb.png" alt="Like Us"></a>

         </div>
         <div class="bottom-bar">
             <center><i class="fa fa-copyright footer">2015 All Rights Reserved<a href="#"> Privacy Policy</a><a href="#"> Terms & Conditions</a></i></center>
         </div>

在此先感谢

Answer 1

我的第一个猜测是你需要.top-bar右边的40px填充。

您可以通过添加以下CSS规则来执行此操作：

.top-bar {
  padding-right: 40px;
  box-sizing: border-box;
}

box-sizing属性会将块的总宽度保持为100％，而不是100％加上40px。

如果没有它，块会向右延伸并使用填充，看起来它没有效果。

.top-bar a {
  padding-left: 20px;
  float: right;
  right: 50px;
  padding-top: 7px;
}
.top-bar, .left-bar {
  top: 0;
  left: 0;
}
.top-bar i {
  text-align: right;
}
.right-bar {
  top: 0;
  right: 0;
}
.bottom-bar {
  bottom: 0;
  left: 0;
}
.top-bar, .bottom-bar {
  width: 100%;
  height: 40px;
  background-color: black;
  z-index: 100;
  position: fixed;
}
.top-bar {
  padding-right: 40px;
  box-sizing: border-box;
}
.left-bar, .right-bar {
  height: 100%;
  width: 40px;
  background-color: black;
  z-index: 100;
  position: fixed;
}

<div class="left-bar"></div>
<div class="right-bar"></div>
<div class="top-bar">
  <div></div>
  <a href="#"><img src="images/social-youtube.png" alt="Subscribe Us"></a>
  <a href="#"><img src="images/social-link.png" alt="Follow Us"></a>
  <a href="#"><img src="images/social-gplus.png" alt="Follow Us"></a>
  <a href="#"><img src="images/social-insta.png" alt="Follow Us"></a>
  <a href="#"><img src="images/social-pin.png" alt="Follow Us"></a>
  <a href="#"><img src="images/social-twitter.png" alt="Follow Us"></a>
  <a href="#"><img src="images/social-fb.png" alt="Like Us"></a>
</div>
<div class="bottom-bar">
  <center><i class="fa fa-copyright footer">2015 All Rights Reserved<a href="#"> Privacy Policy</a>
    <a href="#"> Terms & Conditions</a></i>
  </center>
</div>

将固定左对齐div的内容对齐到右侧

1 个答案: