5

この質問には少し説明が必要です。我慢してください：

数か月前、私は Web サイトのセクションに 3 つの部分からなるヘッダーを設定しました。このヘッダーの左側にはタイトルがあり、その内容は変更できます。右側は常に幅 150 ピクセル、高さ 60 ピクセルのロゴです。それらの間には二重線のセットがあります。このようなもの：

[これがタイトルです] ======================================= [ここにロゴ]

この Web サイトはレスポンシブなので、ヘッダー全体の幅は可変です。
見出しは常に 1 行である必要があります。タイトルとロゴの間のスペースを埋めるために、二重線を保持する div のサイズを変更する必要があります。

最初に、メディア クエリと calc(); を使用して行のサイズが変更されるように設定しました。関数。ただし、Web サイトは 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 の 2 つで、失敗します。

私が作成したテーブルレイアウトの例を次に示します: 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 は必要ありません。

これがダニエルドのフィドルの私のフォークです-IE8 +をサポートします

説明：

  • #the-logoコンテナ内の最初の要素になるように移動すると、レイアウトが計算されているときに「優先度が高い」ため、タイトルの下にラップしてドロップすることなく、右#entire-Headerにフロートできます。#the-logo

  • 「clearfix」を追加すると#entire-Header、タイトルが固定サイズによって割り当てられたスペースからはみ出すことを心配する必要がなくなります。heightこれにより、制約を完全に取り除くことができます。#entire-Headerはブロック レベル要素 ( div) です。つまり、既定では幅が 100% になり、明示的に設定する必要はありません (以前にオーバーライドされていない限り)。

  • #the-h2-Titleは 2 番目の要素で#entire-Header、左にフロートされます。ブロック要素 ( h2) であるため#the-logo、単語をその中にラップする前に、全体として下にラップします。

  • ロゴとタイトルを両側に配置したので、スタイルを設定できます#the-lines。ブロック レベルの要素であるため、使用可能なスペース (この場合は 100%) に水平方向に拡張されます。タイトルとロゴの下にはみ出さないように、overflow: hiddenまたはを追加overflow: autoし#the-linesます。これにより、の幅が 2 つのフロート要素間で計算される残りの使用可能なスペースまで狭くなる新しいブロック フォーマット コンテキストが作成されます。#the-lines

    警告:これは の高さが の高さ#the-lineよりも小さい場合にのみ機能し#the-logo、そうでない場合は の#the-line下に折り返されます#the-logo。これは、3 番目の要素であり、レイアウトが最初の 2 つの要素の影響を受けるためです。

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 サポートあり

IE8 のサポートを維持したい場合は、<script>タグを HTML に含めることで読み込みの遅さを修正できます。

      ...
    </div>
  </div>

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

IE8 サポートなし (IE10+)

純粋な CSS ソリューションが必要な場合は、フレックスボックスを使用してください。ヘッダーをフレックスボックスにし、タイトル、行、およびロゴに順序を割り当て、必要に応じて行を縮小および拡大できるようにします。

<!-- 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;
}

フレックスボックスの詳細については、この記事と便利なフレックスボックス プレイグラウンドを参照してください。

于 2015-04-22T23:51:28.430 に答える