元素左侧和右侧的文本 [英] text on left and right side of element

问题描述

使用CSS什么是在元素的右侧和左侧都有文本的最佳方式，并且垂直放置在同一个位置？

使用以下布局：

容器有一个固定的宽度，所以我不想使用定位，因为我知道我不需要。

解决方案

（1）在包含每个文本字符串的元素中添加两个div

 < DIV> 
< div class =div1>左文字< / div> 
< div class =div2>正确文字< / div> 
< / div> 
  

（2）将两个div彼此相邻浮动

  .div1 {
 float：left; 
} 
 
 .div2 {
 float：right; 
 
 
 
 
 
 <3>设置右对齐的文本对齐属性（这将会确保文本一直推到右边，如你的例子）。
  .div2 {
 float ：对; 
 text-align：right; 
} 
  
 
Using CSS what is the best way to have text on both the right and the left side of an element and be in the same spot vertically?

Thus ending up with the following layout:



The container has a fixed width, so I don't want to use positioning, because I know I don't have to.
解决方案
(1) Add two divs within the element that contain each text string
<div>
    <div class="div1">Left Text</div>
    <div class="div2">Right Text</div>
</div>
(2) Float the two divs next to each other
.div1 {
    float: left;
}

.div2 {
    float:right;
}
(3) Set the text-align properties for the right div (this will ensure that the text is pushed all the way to the right as in your example).
.div2 {
    float:right;
    text-align: right;
}


                        
这篇关于元素左侧和右侧的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！