1

私が達成したいのは、すべての要素が同じ行にあることですがtext-overflow、真ん中の段落が利用可能なスペースよりも広い場合はキックインしますが、そうでない場合は、右のフロートは同じ行にある必要があります.

コードペン: http://codepen.io/anon/pen/hHvCA

HTML:

<div id="outer">
  <div id="left"></div>
  <div id="middle">
    <p>Can this paragraph fill the space between the left and right floats without making the right float wrap?</p>
  </div>
  <div id="right"></div>
</div>

CSS:

#outer {
  background-color: #222;
  height: 100px;
  width: 100%;
}

#left {
  background-color: #555;
  width: 100px;
  height: 100px;
  float: left;
}

#right {
  background-color: #777;
  width: 200px;
  height: 100px;
  float: right;
}

#middle {
   background-color: #999;
   height: 100px;
}

#middle > p {
   line-height: 100px;
   color: #eee;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   font-family: monospace;
}
4

6 に答える 6

1

以下のコメントで説明されているように、最善の策は適切なグリッド システムを使用することです。Twitter Bootstrap には、 Default Grid SystemとFluid Grid Systemという 2 つの優れた選択肢があります。さらに、Web サイトから Bootstrap をパッケージ化して、必要なモジュールのみを含めることができます。

それ以外の場合は、タイプミスを# middle修正して、 float: lefton#middleを使用して#rightラップしないようにすることができます。また、JavaScript を使用し#middleて画面サイズに基づいて幅を設定する必要があります。そうしないと、テキストが長すぎ#rightて再び押し下げられる危険があります。グリッド システムを使用すると、ソリューションを簡単に実現できます。

作業するJSを書きましたwindow.onloadが、サイズ変更もできます。

修正コード: http://codepen.io/anon/pen/xfwJi

于 2013-06-23T09:14:29.207 に答える
0

ここにフィドルがあります。それをチェックしてください、それはあなたの問題をほとんど解決します。

さらに、グリッドシステムを使用することをお勧めします。グリッドシステムを使用すると、ほとんどまたはまったく問題なく、より簡単な方法で Web サイトを作成するのに役立ちます。

CSS:

#outer {
  background-color: #222;
  height: 100px;
  width: 100%;
}

#left {
  background-color: #555;
  width: 100px;
  height: 100px;
  float: left;
}

#right {
  background-color: #777;
  width: 200px;
  height: 100px;
  float: right;
    margin-top: -100px;
}

#middle {
   background-color: #999;
   height: 100px;
    width: 72%;
    float:left;
}

#middle > p {
   line-height: 100px;
   color: #eee;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   font-family: monospace;
}

このサイトを見てみましょう。10 個の CSS グリッド システムが用意されています。:)

于 2013-06-23T09:32:05.617 に答える
0

1 つの解決策:

#middle {
   background-color: #999;
   height: 100px;
   float:left;
   width:1364px;
}
于 2013-06-23T09:16:40.843 に答える