我有3个div:
HTML代码:
<div class="spanl"></div>
<div class="center">Headline</div>
<div class="spanr"></div>
请注意,边的div是空的。
这样的事情: http://jsfiddle.net/fsnuh/134/
这可能与css或css3有关吗?如果不是我怎么能用jquery或原始javascript做到这一点?
答案 0 :(得分:4)
获胜的表格! fiddle
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container { display: table; width: 100% }
#left, #right { display: table-cell; width: 50%; background: #ffd }
#content { display: table-cell }
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="content">
<div style="white-space: nowrap" onclick="this.firstChild.nodeValue += ' blah'">blah</div>
</div>
<div id="right"></div>
</div>
</body>
</html>
答案 1 :(得分:1)
如果可以,请为标题添加固定宽度。然后使用jQuery计算宽度并相应地设置它们。
这是一个有效的演示:http://jsfiddle.net/rniestroj/fsnuh/135/
HTML:
<div>
<h3 class="headline2">
<div class="spanl"></div>
<div class="center">Kontakt 11111111111 22222</div>
<div class="spanr"></div>
</h3>
</div>
的CSS:
*{
padding: 0;
margin: 0;
}
h3{
width: 600px;
overflow: auto;
}
.spanr, .spanl {
background: url("../img/headline2.png") no-repeat scroll right center gold;
float: left;
height: 33px;
position: relative;
width: 33%;
}
.center {
background: none repeat scroll 0 0 #E6B043;
float: left;
height: 33px;
line-height: 33px;
padding: 0 10px;
position: relative;
text-transform: uppercase;
width: auto;
}
JS:
var h3Width = $("h3").width();
var centerWidth = $(".center").width();
var asideWidth = 0;
asideWidth = ((h3Width - centerWidth) / 2) - 12;
$(".spanl").width(asideWidth );
$(".spanr").width(asideWidth );
答案 2 :(得分:1)
尝试这种仅限CSS的解决方案:
<强> HTML:强>
<div id="headlines">
<h3 class="headline2">
<span>Kontakt</span>
</h3>
</div>
<强> CSS:强>
#headlines {
background-image: url('../img/headline2.png'), url('../img/headline2.png');
background-repeat: no-repeat;
background-position: left center, right center
}
.headline2, .headline2 > span {
height: 33px;
text-align: center;
text-transform: uppercase;
line-height: 33px
}
.headline2 > span {
background-color: #E6B043;
display: inline-block;
padding: 0 10px
}