纯HTML/CSS解决方案,用于在2个动态大小时对齐3个元素？

Question

这个问题需要一些解释.请多多包涵:

几个月前,我为一个网站上的一个部分设置了一个由三部分组成的标题.在此标题的左侧有一个标题,其内容可以更改.右侧是徽标,总长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: 4px solid #000000 !important;
  height: 1px;
  float: left;
  margin-top: 23px;
  min-width: 40px;
}

#the-logo {
  position: relative;
  max-width: 160px;
  max-height: 50px;
  float: right;
  width: auto;
  height: auto;
  top: 0;
}

<div id="entire-Header">
   <h2 id="the-h2-Title">
      <div id="headlineTextbox">This is a Test Headline</div>
   </h2>
   <div id="the-lines"> &nbsp;</div>
   <img id="the-logo" src="http://placehold.it/150x60">
</div>

问题是,脚本需要很长时间才能加载慢速连接,因此徽标暂时停留在一个奇怪的位置.因此,我正在尝试找到一个纯CSS/HTML解决方案,以执行与我的脚本相同的操作.

这里有相关的问题,但似乎没有一个适用.我不能在标题或线条上加宽,因为它们都是动态的.

表似乎工作正常,但如果我把宽度:auto; 在两个tds上,事情都失败了.

这是我创建的一个好表格布局的例子:http: //jsfiddle.net/d40a429s/1/

table {width: 100%;}
#test-title {width:20%;}
#lines-here {width:auto;}
#lines-here > div {border-top:4px solid #2a2a2a; border-bottom:4px solid #2a2a2a;height: 1px;}
#test-logo {width: 160px; padding-left: 10px;}

<div id="test-Section-Header">
   <table>
      <tbody>
         <tr>
             <td id="test-title"><h2>Test Title</h2></td>
            <td id="lines-here">
               <div></div>
            </td>
            <td id="test-logo">
               <img src="http://placehold.it/150x60" alt="150 x 60 placeholder logo image">
            </td>
         </tr>
      </tbody>
   </table>
</div>

我试过把位置:绝对; 徽标和标题上的顶部/左侧或顶部/右侧,但我不能让中间div正确调整大小.

所以:如果有人在这里做到了:关于如何在没有JS的情况下让它工作的任何想法？或者也许是一种整理我的JS以使其运行更快的方法？

谢谢!

Answer 1

支持 IE8

如果您想保留 IE8 支持，可以通过<script>在 HTML 中包含该标记来解决加载缓慢的问题。

      ...
    </div>
  </div>

  <script>
    // JavaScript here
  </script>
</body>

不支持 IE8 (IE10+)

如果你想要一个纯CSS解决方案，请使用flexbox。将标题设置为弹性框，将顺序分配给标题、行和徽标，并允许行在必要时收缩和增长。

<!-- HTML -->
<div class="container">
  <div class="title">
    Title
  </div>
  <div class="line">
    Line
  </div>
  <div class="logo">
    Logo
  </div>
</div>

/* CSS */
.container {
  display: flex;
  width: 100%;
}
.line {
  order: 1;
  flex-shrink: 10000000;
  flex-grow: 10000000;
}
.title {
  order: 0;
  flex-shrink: 1;
}
.logo {
  order: 2;
  flex-shrink: 1;
}

有关 Flexbox 的更多信息，请参阅这篇文章和这个有用的 Flexbox Playground。