Edit in JSFiddle

<article class="clearfix elem">
    <span class="label begin"> &lt;article&gt; </span>
    <img src="http://zh.learnlayout.com/images/ilta.png" alt="test-img"/>
    <p>你甚至还能同时使用 min-width 和 max-width 来限制图片的最大或最小宽度！</p>
    
    <span class="label end"> &lt;/article&gt; </span>
</article>

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.elem{
    border:solid #6AC5AC 3px;
    position:relative;
}

.label{
    position:absolute;
    background-color:#6AC5AC;
    line-height:1em;
    padding:3px;
}
.begin{
    left:0;
    top:0;
}
.end{
    right:0;
    bottom:0;
}
p{
    margin:2em 0;
    display:block;
}

article img {
  float: right;
  width: 50%;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}