Problems:
We want to display something like this.
The container has an image arrow on the right. The content text length is undetermined.
Solution:
We can resort to background to display the image.
/*A padding is put on the right to display the image. The background image is put to the right to fill the padding area. */
p {
background: url("http://images.apple.com/support/home/images/morearrow.png") no-repeat scroll right center transparent;
margin: 0;
padding: 0 9px 0 5px;
}
It is even possible to display 2 background images, one on the left and another on the right.
p{
margin: 0;
padding: 0 9px 0 9px;
background: url("http://images.apple.com/support/home/images/morearrow.png") no-repeat left center, url("http://images.apple.com/support/home/images/morearrow.png") no-repeat right center;
}
Related Patterns:
If we need to display the right image X pixels from the right border, we can not do it with this method because background-position can not do this. So, we may have to use:
- 大小: 647 Bytes
- 大小: 752 Bytes
分享到:
相关推荐
background-image:url(images/bj01.jpg); display:block; margin:0px; padding-top:10px; padding-right:0px; padding-bottom:13px; padding-left:0px; } #daohang a:link,#daohang a:visited{ color:#FFF; ...
- changed the name of image tag to photo tag in images.xml Version 1.0.3.4054 - 14-Feb-11 - renamed the widthComponent and heightComponent attributes from settings.xml to componentWidth and ...
background-image:url(images/header.jpg); } #header ul { padding:272px 0 0 32px; width: 719px; } #header ul li { width:77px; height:18px; float:left; } #header ul li a { text-decoration:...
background-image: url(<#IMG_DIR#>/logo.gif); background-position: left; background-repeat: no-repeat; cursor: pointer; height: 76px; margin: 0px; padding: 0px; width: ...
background-image: url(images/bg.gif); background-repeat: repeat; } ul,li,h2{margin:0;padding:0;} ul{list-style:none;} #top{ width:909px; height:26px; background-image: url(images/h2bg.gif); ...
动态爱心表白代码 html js网页源代码 情人节送女友礼物浪漫编程,七夕程序员表白Html代码表白的套路很多,但都少不了送花送礼物,作为一个程序员,搞不懂现在流行的泡泡机、小猪、重力感应车等玩具,也不想去让朋友...
background:url(../images/bg2.jpg)no-repeat; background-color:#FFF; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-attachment: fixed; background...
+ improved image rendering code for transparent (PNG) images. They will be drawn transparently also when scaled and also in high resolution rendering mode. + new code to draw dotted lines ...
Fixed : Issue with popupmenu on background interfering with scrolling interaction in TTMSFMXTableView Fixed : Issue with selection persistence of items when scrolling in TTMSFMXTableView Fixed : ...
.de{ background-image:url(http://paui.52done.cn/demos/menu/images/nav_bg.gif);} #demo1{list-style:none; height:26px; cursor:pointer; background-image:url(http://paui.52done.cn/demos/menu/ima
<a href="http://www.adobe.com/products/fireworks/"><img class="image" src="images/fireworks.gif" alt="Adobe Fireworks 8" title="Adobe Firerworks 8" /> <p class="fire">Get top-quality design results. ...
这是一个简单的折叠框效果实现,核心内容jQ库里的slideToggle()方法 效果图如下: css代码: .con_ul{ padding: 0; margin: 0; overflow: auto;... padding: 10px;... background-image: url(images/drop_
{width: '52px', border: '1px solid black', padding: '2px'}, buttonStyle: {background: '#FFF'}, backButtonHTML: 'zoom back', backButtonStyle: {background: '#FFF', display: 'none'}, ...
.icon1 a:hover {background: url(images/sprite.gif) no-repeat -693px -132px} .icon2 {text-indent: -9999px; width: 15px; float: right; padding:30px 15px 0 0;} .icon2 a {width: 15px; display: block; ...
$flash_page_images_src : PRODUCTS_IMAGE_NO_IMAGE ).'"'; $flash_page_price_con[] = '"'.$currencies->display_price(zen_get_products_base_price($flash_page->fields['products_id']),zen_get_tax_rate($...
一列固定宽度网页用于我的学习笔记,很不错吧。这张网页,我只是尝试了一下背景图片的绝对定位设置。...body ></body >之间编写一个DIV标签,给DIV标签使用layout作为ID... background-image: url(images/tupian/
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../...
background-image:url(images/mmain_03.gif) } #dh li { height:30px; width:110px; float:left; list-style:none; text-align:center; margin:7px; padding:5px; } #dh li a:link { font-size:16px; font-weight:...
background-image:url(images/navigation_bg.gif);">当前位置:添加歌曲 >> <div id="main" style="padding:0px; margin:0px; margin-bottom:5px;" class="tableBorder_blue"> (form1)"> 歌曲类别: ...
background-image: url(../images/arrow.png) ; background-repeat: no-repeat; background-position: 0px 0px; } <br> 13. 增强 RSS 聚合功能 <br>1) 解决RSS 中文输出乱码 2) 可生成...