Question

我有一个div容器，根据用户状态显示内容（登录，匿名）。在每种情况下，我需要通过CSS仅移动内容div下方的底部div。例如，对于登录用户，我需要在.loggedIn div下面显示div（.loggedInBottom和.loggedIn）和.loggedInBottom div。我无法移动div，但可以更改CSS来执行此操作。

两个*底部div需要与容器具有相同的背景颜色。

网络浏览器支持：IE9 +，FF，Chrome。

有什么想法吗？请提供鳕鱼。感谢。

 <style type="text/css">
        /*
        Problem:
        1: When loggged in, 1 needs to move below 4 via CSS only, not move div tag
        2: Same as 1 above, Wwen not logged in, 2 needs stop move below 3 via CSS only

        */        
          .hide {
              display: none;
          }
          .container{
              background-color:grey;
              width: 300px;
              height: auto;
          }
          .loggedIn{ 
              height: auto;       //the height varies from time to time
           }
          .loggedInBottom{}

          .anonymous{}
          .anonymousBottom{}
 </style>
  
 
      <p>Logged In</p>
      <div class="container">
          <div class="loggedInBottom">bottom: When users are logged</div> <!--1 needs to move below 4 via CSS only-->
          <div class="anonymousBottom hide">bottom: anonymous users</div> <!--2 -->
          <div class="anonymous hide">Content: anonymous users</div> <!--3 -->
          <div class="loggedIn">content: When users are logged. the height varies from time to time</div> <!--4 --> <!-- need to move this div tag to above 1 via CSS only  -->
      </div>

      <p>anonymous users</p>
      <div class="container">
          <div class="loggedInBottom hide">bottom: When users are logged</div>
          <div class="anonymousBottom">bottom: anonymous users</div> <!--2 needs to below 3 via CSS only-->
          <div class="anonymous">Content: anonymous users</div> <!--3 -->
          <div class="loggedIn hide">content: When users are logged</div>
      </div>

Answer 1

这是一个棘手的请求，很大程度上取决于您的页面的构建方式。可以设置一些CSS来移动一个元素。

.container {
  position: relative;
}
.loggedInBottom, .anonymousBottom {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background-color: inherit;
}

如果不在底部，上面可能会覆盖页面的其他一些内容。如果是这样，您需要在margin-bottom上使用.container。

CSS样式：通过CSS移动div标签位置

1 个答案: