这个问题需要一些解释.请多多包涵:
几个月前,我为一个网站上的一个部分设置了一个由三部分组成的标题.在此标题的左侧有一个标题,其内容可以更改.右侧是徽标,总长150 px宽,60 px高.它们之间是一组双线.像这样的东西:
[这是标题] ======================================= [这里的标志]
该网站是响应式的,因此标题的总宽度是可变的.
标题必须始终在一行.保持双线的div需要改变大小以填充Title和Logo之间的空间.
我最初设置它,以便使用媒体查询和calc()调整行的大小; 功能.但是,网站必须兼容到IE 8,所以我最终编写了一些JS来使其工作.
这是一个JS小提琴,它基本上反映了这种行为:http: //jsfiddle.net/55u5mpu2/2/
function sizeLines() {
var logoSize = document.getElementById("the-logo").offsetWidth;
var titleWidth = document.getElementById("the-h2-Title").offsetWidth;
var totalWidth = document.getElementById("entire-Header").offsetWidth;
var offsetWidth = (logoSize + titleWidth);
var linesWidth = (totalWidth - offsetWidth - 20) + "px";
document.querySelector("#the-lines").style.width = linesWidth; }
window.onresize = sizeLines; #entire-Header{
position: relative;
width: 100%;
height:40px;
}
#the-h2-Title {
position: relative;
float: left;
width: auto;
padding-right: 10px;
}
#the-lines {
border-top: 4px solid #000000 !important;
border-bottom: …