看图:
我想在不使用 Javascript 的情况下,如果 .elements 的文本(查看末尾的 html)太长,则将其分开放置在灰色区域的两行上。
“ Hello World !你好 StackOverFlow!”是应该分开的文本。
** 如果您认为遗漏了什么,或者我没有充分解释自己,请尽管问我,我会尽力为您提供您想知道的;)
HTML
<div class="filter">
<div class="left"></div>
<div class="center">
<div class="arrow">Search Filter Research Text Test</div>
<div class="head"></div>
<div class="element"><div>Hello World! Hello StackOverFlow!</div></div>
</div>
<div class="right"></div>
</div>
CSS
.table .filter {
height: 44px;
position: relative;
}
.table .filter div {
height: 44px;
}
.table .filter .left {
width: 7px;
position: absolute;
left: 0;
background: url('../images/Tableau/filtre/gauche.png') no-repeat;
}
.table .filter .right {
width: 7px;
position: absolute;
right: 0;
background: url('../images/Tableau/filtre/droit.png') no-repeat;
}
.table .filter .center {
background: transparent url('../images/Tableau/filtre/centre.png') repeat-x;
left: 7px;
right: 7px;
position: absolute;
}
.table .filter .center>div {
float: left;
}
.table .filter .center .arrow {
background: url('../images/Tableau/filtre/fleche-centre.png') repeat-x;
}
.table .filter .center .head {
width: 13px;
background: url('../images/Tableau/filtre/fleche.png') no-repeat;
}
.table .filter .center .element {
text-align: center;
margin: auto;
}
.table .filter .center .element>div {
width: 100%;
text-align: center;
}
最佳答案
关于html - CSS 文本 float 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10934171/