我附上了这个图像,(01)作为一个固定的元素,而其他人需要(理解你的期望)在彼此之下适当缩进。
查找附加的我的css代码
<div class="col-md-3 verticalLine "><h2><span class="numberCircle">01</span><span><a href="#">Understanding your Expectations</a></span></h2>
<p>We need to fully understand what you want to achieve so we consider all possible solutions.</p>
</div>
我基本上希望将理解你的期望从01中缩小,并且在句子的第一个单词下面还有破碎的单词。
由于
- CSS ---
.sectors-a div h2 {
color: #5FD0FF;
font-size: 21px;
font-weight: normal;
padding-bottom: 20px;
}
.sectors-a div h2 span a {
color: #5FD0FF;
font-size: 20px;
font-weight: bold;
font-style: italic;
font-family: Pathway Gothic, Arial, Helvetica, sans-serif;
/* height: 28px; */
/*
text-indent: 100px;
padding-left: 10px;
*/
padding-left:10px;
padding-bottom: 15px;
}
.sectors-a div h2 span a:hover {
text-decoration: none;
}
.sectors-a div h2 span.numberCircle {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 50px;
height: 50px;
padding: 8px;
background: #5FD0FF;
border: 2px solid #5FD0FF;
color: #fff;
text-align: center;
font-weight: 900;
font-family: Pathway Gothic, Arial, Helvetica, sans-serif;
font-size: 25px;
}
.verticalLine {
border-right: 1px solid #727272;
}
.sectors-a {
border-top: 1px solid #ddd;
padding-top: 40px;
margin-top: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #ddd;
background: url('../img/tabsBtmBg.png') repeat;
}
.ie .sectors div h2 a {
font-family: Exo2-ExtraBoldItalic,Arial, Helvetica, sans-serif;
}
.sectors div a {
margin-left: 0;
line-height: 21px;
font-size: 14px;
/* font-family: Pathway Gothic IE, Arial, Helvetica, sans-serif;*/
}
答案 0 :(得分:0)
您可以使用position:absolute
从文档流中删除数字圈,然后在标题上设置display:inline-block
和padding
。
.col-md-3 {
width:200px; // The width of your column's
position:relative;
}
.numberCircle {
position:absolute;
top:0;
left:0;
}
h2 a {
padding-left:40px; // The space for your numberCircle
display:inline-block;
}
答案 1 :(得分:0)
您可以将display: table;
应用于包含两个span标记的<h2>
,并将display:table-cell; padding-left: 15px;
应用于<span class="numberCircle">01</span>
,以便在数字和标题之间留出空格。
以下是CSS代码段:
.col-md-3 {
width:200px;
position:relative;
}
.col-md-3 h2 {
display: table;
}
.numberCircle {
display: table-cell;
padding-right: 15px;
}