纯css没法实现，除非你的元素宽度完全写死，那样的话会有很多问题，还是用js来实现吧，我写的这个需要引入jquery
<div id="main"><p class="tocenterRight">哥哥</p>
<p class="tocenterRight">你哥哥</p>
<p class="tocenterRight">你的大哥哥</p>
</div>
<script src="jquery-3.2.1.min.js" type="application/javascript"></script>
<script>
$(document).ready(function(){
//传入type参数center-right 或者left-right 可以传入以后看下效果，第二个参数是要做对其的类名，自己测试一下。
textAlign("center-right",".tocenterRight")
})
var textAlign = function(type,classname){
var o = $(classname)
var maxwidth = 0
switch (type){
case "center-right" :
$(o).css("text-align","right")
if(o.length>0){
$(o).css("width",parseInt($($(o).parent()).width()/2))
}else{
console.log("找不到任何对象！")
}
break
case "left-right" :
$(o).css("text-align","right")
if(o.length>0){
for(var i=0i<o.lengthi++){
$(o[i]).css("display","inline")
maxwidth = parseInt($(o[i]).css("width"))>maxwidth ? parseInt($(o[i]).css("width")) : maxwidth
}
$(o).css("display","block")
$(o).css("width",maxwidth)
}else{
console.log("找不到任何对象！")
}
break
default :
break
}
}
</script>
两种对齐的效果看下图：
字符串s的长度是8，所以循环8次。而s中的'1'，'2'，'3'，'4'都是字符与数字1，2，3是不相等的（因为'1'表示数字1的ASCII码等于49，而'2'等于50....），所以从default进入，而default和所有case都没有break，所以都会执行，所以都是8。
<script language="javascript">function diff(x){
ie4=(document.all)?true:false
if (ie4){
block=x.style
}
var a=screen.width
switch (a){
case 1024:
block.left=""+(parseInt(block.left)+112)
break
case 1152:
block.left=""+(parseInt(block.left)+176)
break
case 1280:
block.left=""+(parseInt(block.left)+240)
break
}}
</script>
<div id="mooon" style="position:relativewidth:350pxheight:14pxz-index:1background-color: #cccccclayer-background-color: #6699ccborder: 1px none #000000left:150pxtop:385px">
层的内容 </div>
<script>diff(mooon)</script>
注意：上面这种方法能实现层的固定，但有一个问题是要固定的这个层会独占用高度，以下的方法可以解决：
<div id="Layer1" style="position:absolutewidth:49pxheight:14px">
<div id="mooon" style="position:absolutewidth:645pxheight:43pxz-index:1layer-background-color: #6699ccborder: 0px none #000000left:330pxtop:380px">内容
＜／div＞
</div>
这些代码可以让层固定显示
