Question

我有一个主要内容区域为960px且margin:0 auto;的网站我需要在主要内容区域的右侧定位一些社交图标（如left:100%所以它位于主要内容之外内容区域，但附在右侧）。

我不能使用绝对值，因为他们希望按钮在页面滚动时始终在同一位置可见。我不能使用right:0，因为它会将它放在浏览器窗口的右侧，而不是主要内容区域的右侧。什么是基于主要内容区域修复内容的最佳方法？如果需要，我可以调整标记。

编辑：这就是我现在基本上用于标记的内容。

<div class="mainContentArea">
    <div class="socialIconsWrapper">
        <div class="socialIcons">

Answer 1

将其放在页脚部分的内容区域内，然后使用左：100％;

Answer 2

您可以使用left: calc(50% + 480px)设置固定社交图标的位置。示例如下：

.page {
  width: 100%;
}
.main {
  width: 320px;
  margin: 0 auto;
  position: relative;
  height: 800px;
  background-color: grey;
}
.social {
  width: 20px;
  height: 20px;
  position: fixed;
  left: calc(50% + 160px);
  background-color: red;
}

<div class="page">
  <div class="main">
    <div class="social">
    </div>
  </div>
</div>

Answer 3

使用flex。

var res = (from p in db.ProjectTable
          select new Project
          {
              Id = p.Id,
              ProjectName = p.ProjectName,
              TaskList = (from q in db.TaskTable
                         where q.ProjectId = p.Id
                         select q
                      ).ToList()
          }).ToList();
 return res;  //you will get List<Project> with their List<TaskList>

.main {
  width: 980px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  background: red;
  justify-content: flex-end;
}

.social-icons {
  align-self: flex-end;
}

Answer 4

您可以尝试使用jquery计算主要内容区域之外的正确值。我放了$(window).resize()函数，这样每次调整屏幕大小时社交图标包装器右边的值都会保留。

以下是我如何提出固定位置的社交图标权利的价值的步骤：
- 注意window width
- 抽取window width到main content width
- 减法的值除以2
- 在减去social icons wrapper width之后
- 最后，您可以直接从主要内容区域获取社交图标包装器的值

这是我的工作jsFiddle

$(document).ready(function(){
  $contrgt = $(window).width() - $('.mainContentArea').width();
  $socwd = $('.socialIconsWrapper').width();

 	$('.socialIconsWrapper').css('right', ($contrgt/2)-$socwd+'px');

    $(window).resize(function(){ 
     $contrgt = $(window).width() - $('.mainContentArea').width();
     $socwd = $('.socialIconsWrapper').width();
     $('.socialIconsWrapper').css('right', ($contrgt/2)-$socwd+'px');
    });
    
    console.log('right='+$contrgt+'px');   
});

*{ border-sizing: border-box; padding: 0; margin: 0; } /* used for global styling */

.mainContentArea{ max-width: 400px; margin: 20px auto; width: 100%; background: blue; color: #fff; }
.socialIconsWrapper{ background: red; position: fixed; z-index: 99; }
.socialIconsWrapper a{ color: #fff; }

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <div class="mainContentArea">
    <div class="socialIconsWrapper">
        <div class="socialIcons">
           <a href="">fb</a>
           <a href="">twitter</a>
           <a href="">youtube</a>
        </div>
    </div>
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
    some content here some content here some content here
</div>

主要居中内容

4 个答案: