使用CSS样式...将多行文字右端对齐;例如:第一行文字:哥哥 第二行文字...
发布网友
发布时间：2022-04-24 07:22
共5个回答
热心网友
时间：2022-04-20 18:57
纯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=0;i<o.length;i++){
$(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>
两种对齐的效果看下图：
热心网友
时间：2022-04-20 20:15
.main{
border:1px solid #06F;
width:500px;
height:300px;
}
.box {
width:50px;/* 根据需要调整你的宽度*/
margin:0 auto;
text-align:right;
background:#CCC;
}
</style>
<div class="main">
<div class="box">
<p>哥哥</p>
<p>你哥哥</p>
</div>
</div>
如果需要自适应的话就等写JS了 有需要就追问
热心网友
时间：2022-04-20 21:50
热心网友
时间：2022-04-20 23:41
热心网友
时间：2022-04-21 01:49
