0

次のコードを使用して、テキストを 2 番目の列にフローできるようにしています。文字の上部が最初の列の下部で切り取られ、文字の残りの部分が 2 列目の上部に表示されることを除いて、すべて問題ありません。

.two-column-flow {
column-count: 2;
column-gap: 20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
height: 150px;
padding-bottom: 10px;
}

ページの左側にある [機能] タブをクリックし、[エンターテイメント] セクションを見て、私が話していることを確認してください。 http://www.dreamhomevacationrentals.com/hotels/spanish-modern-retreat/

どんな助けでも大歓迎です:)

4

1 に答える 1

1

Windows Chrome、Firefox、およびIEでこの問題を確認したところ、結果が異なります.Chromeでは、説明したようにテキストが途切れ、IEでは問題のテキストがまったく表示されません（最後の2行-「ゲームルーム」）および「VCR」)、Firefox では 2 つの列は 1 つの列としてのみ表示され、「エンターテイメント」の 2 番目の列に表示されるコピー全体が、下の「通信」セクションのコピー、最後のエントリ「VCR」と重なっています。 「ブロードバンドアクセス」をカバー。上記のすべてのブラウザーで、 " " の " " を削除し (style.css の 351 行目)、クラス " " のtoを増やす (style.css の 109 行目)
という 2 つの調整で、これをすべてのブラウザーで修正できました。display:inline-block;.text-wrapheight:150px;height:200px;.two-column-flow
これらのスタイルがサイトの他の場所で使用されているかどうかはわからないため、これらの調整が他の問題を引き起こすかどうかはわかりませんが、現在の問題が解決する場合は、特定のクラスをエンターテイメント セクションに追加するだけです。上記の変更をこのクラスにのみ適用します。

更新：テキストの最初の行がずれているというフォローアップの問題について、解決策を見つけました（再び-Windows Firefox、Chrome、およびIEで「のみ」テストされました）-クラス.text-wrapのパディングを変更します（351行目） style.css で):

.text-wrap
{  
  padding: 0 2% 30px;  
}

に 

.text-wrap
{  
  padding: 0 0 30px;  
}

その後、最初の行が再び整列して表示されます。
すでに述べたように、あなたのサイトの他のセクションで起こりうる結果についてはわかりません。そのため、すべての変更を適用して 2 列レイアウトの問題のみを修正することを検討してください。たとえば、両方のクラス.text-wrapと.pre-wrapped-text(完全を期すために.text-wrap.pre-wrapped-textスペースなし)またはto .two-column-flow .text-wrap(= class を持つ要素であり、 class を持つ要素.text-wrapの子である.two-column-flow)。

この問題を確認しているときに、Internet Explorer のみで別の問題に気付きました。 header .ribbon「壊れている」ということは、「About us Chat My Account」のナビゲーションがメイン ナビゲーションの上に 1 行ではなく、右側に 1 行表示されることを意味します。他の上 - 「連絡先」の上に「私たちについて」、下に「連絡先」と「マイアカウント」を重ねて「チャット」。これは簡単に修正できます。これはwidth: initial;、IE が処理できない設定が原因です。IE でこれを修正し、他のブラウザで問題が発生しないようにするには、width: auto; 前に width: initial;. IE が認識width: auto;し、ナビが固定されている場合、他のブラウザー (両方の width-settings を認識する) は、最初の width の設定と using を無視しwidth: initial;ます。これは 2 つの設定に適用されます。header .ribbon（42行目）および.ribbon ul（47行目）。例としてheader .ribbon(すべてを置き換えるものではなく、追加するだけです)width: auto; : 

header .ribbon
{
  width: auto;    // for IE
  width: initial; // for the rest, will be ignored by IE
}

前述の IE の問題の参照として: IE で機能しない要素に初期幅を使用する

于 2014-10-05T02:03:45.683 に答える