1

これまでお世話になりました皆様、ありがとうございました。説明、コンセプト イメージ、JSFiddle リンクを更新して、もう少しわかりやすくしました。

私は一日中、この一見小さな問題に頭を悩ませてきました。私の Web 開発者の友人は困惑しており、このサイトや他のサイトを検索しても適切な答えが見つかりませんでした (ただし、途中で見落としていた可能性があります)。

これが私が達成しようとしていることです：

  • 1 つの固定幅コンテナー DIV 内の 3 つの非固定幅 DIV
  • 中央の DIV は中央に配置する必要があり、含まれるテキストよりも大きくしないでください。
  • 左右の DIV は、コンテナー DIV の残りのスペースを埋める必要があります。

この概念を伝えるのに役立ついくつかのリンクを次に示します。

これは私が終わらせたいものです

このJSFiddleリンクをチェックしてください

基本的な HTML:

<div id="container" >
  <div id="left" ></div>
  <div id="center" >Text inside center should resize this block</div>
  <div id="right" ></div>
</div>

以下では、私が試したほとんどのスタイルを削除しました。この CSS は現在、DIV を中央に配置します (インライン ブロックとして設定した場合) が、残りの左右のスペースを埋めるために他の div が必要です。

#container {
  width:750px;
  text-align:center;
  border:3px solid #E85355;
}
#left {
  background-color:#A3CB46;
}
#center {
      background-color:#6D6E71;
  display:inline-block;
  color:#FFFFFF;
}
#right {
  background-color:#1DB0CE;
}

フローティング、ラップなし、オーバーフローなどを試しました。助けを提供できる人に感謝します!

4

4 に答える 4

1

次の CSS を試してください。コンテナの幅いっぱいに...

#container {
    width:764px;
    text-align:center;
}
#container > div {
    display: table-cell;   
}
#center {
    background-color:#CDD7D7;
}
#right, #left {
    background-color:#E85355;
    width:200px;
}

編集: 表示: コンテナ上のテーブル、不要...

于 2013-10-24T04:03:02.003 に答える
0

これを試して：

jsfiddle.net/SHnc9/36/

于 2013-10-24T04:03:37.077 に答える
0

これは必要ですか？

CSS

#container {
    width:764px;
    text-align:center;}
#left {
    background-color:#E85355;
    width:20px;
    height:20px;
    float:left;
}
#center {
    background-color:#CDD7D7;
    display:inline-block;}
#right {
    background-color:#65A8A6;
    width:20px;
    height:20px;
    float:right;
}

デモ

于 2013-10-24T03:52:57.810 に答える
0

でできますflexbox！デモ: http://dabblet.com/gist/7187048

マークアップ

<div class='container'>
  <div class='box left'></div>
  <div class='box center'>enter text here to see this box grow!</div>
  <div class='box right'></div>
</div>

CSS

.container {
  display: flex;
  }

.box {
  flex-grow: 1;
  }
.center {
    flex-grow: 0; /* to get the box to wrap closely around the text */
    }

caniuse.com http://caniuse.com/#search=flexboxによると、すべての主要なデスクトップ ブラウザーでサポートされており、firefox は部分的にサポートされています。これはおそらく、古い構文を使用している/いくつかの新しいプロパティをサポートしていないことを意味しますが、デモは私がチェックしたときはうまくいきました。

必ずプレフィックスを使用する (またはプレフィックスフリー / プレフィックス プラグインを使用する) こと、古いブラウザー バージョンの古い構文を追加すること (新しい構文の下に古い構文を追加すること) を確認してください。また、display: inline-blockフォールバックとして使用します。

flexie.js http://flexiejs.com/もチェックしてみてください。

必読: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

于 2013-10-27T20:12:35.540 に答える