如何删除/掩盖main_right_article_pic.png
右侧的14px边框?
HTML:
<div class="main_right_article">
<span class="main_right_article_left">
<img src="img/main_right_article_pic.png" width="54" height="54" alt="Joe Bloggs">
</span>
<article>
<h4>Joe Bloggs</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis fringilla mi quis sollicitudin. Maecenas orci diam, congue eget sodales nec, facilisis eu eros.</p>
</article>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
body
{
font-family: 'Open Sans', sans-serif;
}
div.main_right_article
{
clear: both;
float: left;
margin-top: 25px;
width: 425px;
}
span.main_right_article_left
{
float: left;
background: url("../img/article_mark.png") no-repeat right 20px;
height: 54px;
width: 73px;
}
article
{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color: #f1f1f1;
border: 1px solid #c9c9ca;
float: right;
padding: 10px;
width: 330px;
}
article h4
{
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
text-shadow: 1px 1px 1px rgba(21, 21, 21, 0.3);
}
article p
{
font-size: 12px;
}
答案 0 :(得分:0)
您可以使用CSS中的工具提示来避免此问题。
答案 1 :(得分:0)
我就这样做了:
<强> CSS:强>
span.main_right_article_left
{
float: left;
height: 54px;
width: 54px;
}
span.main_right_article_mark
{
background-image: url("../img/article_mark.png");
float: left;
height: 14px;
position: relative;
right: -6px;
top: 20px;
width: 14px;
}
<强> HTML:强>
<div class="main_right_article">
<span class="main_right_article_left std_pic">
<img src="img/main_right_article_pic.png" width="54" height="54" alt="Joe Bloggs">
</span>
<span class="main_right_article_mark"> </span>
<article>
<h4>Joe Bloggs</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis fringilla mi quis sollicitudin. Maecenas orci diam, congue eget sodales nec, facilisis eu eros.</p>
</article>
</div>