css 固定文字位置

html-css017

css 固定文字位置,第1张

用Table做

按你的想法:

<table>

<tr><td

class="a">哈哈</td><td>类型</td><td>价格</td></tr>

<tr><td

class="a">哈哈1111</td><td>类型</td><td>价格</td></tr>

<tr><td

class="a">哈哈111111</td><td>类型</td><td>价格</td></tr>

</table>

固定每个tr的第一个td宽度就可以了,将你最长的那个数据的宽度设为td宽度

CSS:

.a

{width:200px

}

有很多种方法可以实现。

随便写几种。

------------------------------

CSS部分:

.text{background-imageurl(pic.jpg)

width: xx px /*你自己定义的宽*/

height: xx px /*你自己定义的高*/

overflow:hidden/*超出部分隐藏*/}

.text span{

margin-top:xx px/*离上边距离*/

margin-left:xx px/*离左边距离*/

}

html部分:

<div class="text"><span>字</span></div>

------------------------------

CSS部分:

.text{background-imageurl(pic.jpg)

width: xx px /*你自己定义的宽*/

height: xx px /*你自己定义的高*/

position:relative/*相对定位*/}

.text span{

position:absolute/*绝对定位*/

top:xx px/*离上边距离*/

left:xx px/*离左边距离*/

}

html部分:

<div class="text"><span>字</span></div>

--------------------------------------

CSS部分:

.text{background-imageurl(pic.jpg)

width: xx px /*注意,这里是你自己定义的宽减去padding-left的值*/

height: xx px /*注意,这里是你你自己定义的高减去padding-top的值*/

padding-top:xx px/*离上边距离*/

padding-left:xx px/*离左边距离*/

}

html部分:

<div class="text">字</div>

lz自己选吧。

定位方案有四种:静态定位、相对定位、绝对定位和固定定位。你可以使用CSS 3中的「position」属性来决定要使用的定位方式。

在这四种方案中,静态和相对定位不会影响整个文档的布局,而绝对和固定定位会与文档分开,因此页面不会为这两种类型的定位元素保留空间。 在默认状态下,所有元素都是静态放置的,即元素从上到下以及从左到右的顺序排列。

只要为元素设置了“ position”属性,就可以使用“ top”,“ right”,“ bottom”和“ left”属性精确定义其位置。

扩展资料:

相对定位中的“top”,“right”,“bottom”和“left”用于设置距元素原始位置的偏移量,但是绝对定位的四个属性不同。

在绝对定位中,“top”是指所定位元素上方的外部边界与容纳块上方的内部边界之间的距离。 换句话说,已定位元素的边距和包含块的边界将影响top的值,进而影响绝对定位元素的位置,但包含块的填充将不起作用。

在相对定位中,“top”是指被定位元素上方的外边界与其原始位置的上边缘之间的距离。“bottom”的含义类似于“top”,是指定位元素下方的外部边界与容纳块下方的内部边界之间的距离,“left”和“right”也是如此。