5

这个问题需要一点解释。请多多包涵：

几个月前，我为网站上的一个部分设置了一个由三部分组成的标题。在此标题的左侧有一个标题，其内容可以更改。右侧是一个徽标，始终为 150 像素宽 x 60 像素高。它们之间是一组双线。像这样的东西：

[这是标题] ========================================= [这里的标志]

这个网站是响应式的，所以标题的整体宽度是可变的。
标题必须始终位于一行。包含双线的 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 解决方案来做与我的脚本相同的事情。

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

表格似乎工作正常，但如果我输入 width: 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>

我试过把 position: absolute; 以及徽标和标题上的顶部/左侧或顶部/右侧，但我无法让中间 div 正确调整大小。

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

谢谢！

4

3 回答 3

1

您的问题可以完全使用 HTML 和 CSS 通过稍微修改它们来解决，不需要 JavaScript。

这是 Danield小提琴的叉子- 支持 IE8+

解释：

  • 移动#the-logo成为#entire-Header容器中的第一个元素允许我们#the-logo向右浮动，而不会包裹并下降到标题下方，因为在计算布局时它具有“更高的优先级”。

  • 添加“clearfix”#entire-Header让我们不必担心标题溢出由任何固定尺寸分配的空间。这使我们可以完全消除height约束。#entire-Header是一个块级元素 ( div)，这意味着默认情况下它的宽度将为 100%，并且不需要显式设置（除非它之前已被覆盖）。

  • #the-h2-Title是其中的第二个元素#entire-Header并且向左浮动。作为一个块元素（h2），它会#the-logo在将单词包装在自身内部之前将其作为一个整体包装在下面。

  • 现在我们在两边都有了 logo 和标题，我们可以设置#the-lines. 作为块级元素，它将水平扩展至可用空间，在本例中为 100%。为了防止它延伸到标题和徽标下方，我们添加overflow: hidden或。这将创建一个新的块格式化上下文，使' 的宽度缩小到在两个浮动元素之间计算的剩余可用空间。overflow: auto#the-lines#the-lines

    警告：这仅在 的高度#the-line小于的高度时才有效#the-logo，否则#the-line将包裹在 下方#the-logo。这是因为它是第三个元素，它的布局受前两个元素的影响。

CSS： 

#entire-Header {
    margin: 1em 0 .5em;
}
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
#entire-Header:before,
#entire-Header:after {
    content: " ";
    display: table;
}
#entire-Header:after {
    clear: both;
} 
#the-h2-Title {
    margin: .5em 0;
    float: left;
    margin-right: 10px;
}
#the-lines {
    border-top: 4px solid #000000 !important;
    border-bottom: 4px solid #000000 !important;
    height: 1px;
    /* http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ */
    overflow: hidden;
    margin-top: 23px;
}
#the-logo {
    width: 160px;
    height: 50px;
    margin-left: 10px;
    float: right;
}

标记： 

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

    <div id="the-lines"></div>
</div>
于 2015-04-30T20:32:19.727 回答
0

这当然可以通过 IE8 支持来完成

1）将固定宽度+浮动右图移动为第一个孩子

2）保持float:left在标题上

3）在行overflow:hidden上设置（或自动）（建立新的块格式化上下文）

4）设置display:inline-block在容器上（包含浮动）

更新了 FIDDLE（调整浏览器大小查看效果）

#entire-Header {
  display: inline-block;
  width: 100%;
  height: 40px;
}
#the-h2-Title {
  float: left;
  padding-right: 10px;
}
#the-lines {
  border-top: 4px solid #000000 !important;
  border-bottom: 4px solid #000000 !important;
  height: 1px;
  overflow: hidden;
  margin-top: 23px;
}
#the-logo {
  width: 160px;
  height: 50px;
  padding-left: 10px;
  float: right;
}
<div id="entire-Header">
  <img id="the-logo" src="http://placehold.it/150x60" />
  <h2 id="the-h2-Title">
      <div id="headlineTextbox">This is a Test Headline</div>
   </h2>
  <div id="the-lines"></div>

</div>

于 2015-04-26T20:47:53.100 回答
0

支持 IE8

如果你想保持对 IE8 的支持，你可以通过<script>在 HTML 中包含标签来修复加载缓慢的问题。

      ...
    </div>
  </div>

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

不支持 IE8 (IE10+)

如果您想要纯 CSS 解决方案，请使用 flexbox。将 header 设置为 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。

于 2015-04-22T23:51:28.430 回答