我有一个带有子元素的可重复包装元素:内容元素,左右元素,所有 div。
我想添加一些文本(即“已退休”),旋转几度,例如内容背景中的水印。这不能是背景图像,因为此文本应本地化(并且出于维护目的,更容易更改文本而不是图像)。
下一张图片显示了文本“Retired”的配置(不显示左右元素):
这是此元素的基本 HTML 布局,它可能很有用:
<div class="wrapper">
<div class="leftcolumn">Left column</div>
<div class="content">
<h1>Text Text Text Text Text Text</h1>
<p>Text Text Text Text Text Text Text Text Text</p>
</div>
<div class="rightcolumn">Right column</div>
</div>
和 CSS:
.wrapper {
margin: 0 auto;
width: 450px;
display:block;
background-color:#222222;
border-radius: 5px;
}
.content {
float: left;
width: 318px;
padding-left: 5px;
}
.leftcolumn {
width: 50px;
float: left;
}
.rightcolumn {
width: 75px;
float: left;
}
.leftcolumn {
width: 50px;
float: left;
}
.rightcolumn {
width: 75px;
float: left;
}