2

iPhone のタイトルバーのように機能するレイアウトを作成したいと思います。 ここに画像の説明を入力

次の例をまとめようとしましたが、中央の列の幅を広げる方法がわからないため、残りのスペースをすべて使用します。実行時にJavaScriptでこれを行うことができますが、cssソリューションがあるかどうか疑問に思っています。ここにあります：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>

      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

      <style type="text/css">
        html, body {
          margin: 0px;
          padding: 0px;
        }

        #parent {
          background-color: #eee;
          width: 100%;
        }
        #colLeft {
          background-color: #ff8b8b;
          height: 48px;
          display: inline;
        }
        #colMiddle {
          background-color: #c9ffc3;
          height: 48px;
          display: inline;
          text-align: center;
        }
        #colRight {
          background-color: #c3d0ff;
          height: 48px;
          display: inline;
        }
      </style>

   </head>

   <body>

      <div id="parent" style="width:100%">
          <div id="colLeft">left</div>
          <div id="colMiddle">title</div>
          <div id="colRight">right</div>
      </div>

   </body>
</html>

ありがとうございました

4

3 に答える 3

1

私は答えが少し遅れていますが、真ん中を犠牲にする必要なしに、これがあなたが必要としているものにもっと似ているかどうかを確認してください<div>：

3つの列をフロートさせ、内側の列の幅を100％にする必要があります。次に、（左右の列の幅に基づいて）内側の列のマージンを設定すると、結果が得られます。

このフィドルを見てください：http：//jsfiddle.net/fabio_silva/d7SFJ/

HTML / CSS：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>

      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

      <style type="text/css">
        html, body {
          margin: 0px;
          padding: 0px;
        }

        #parent {
          background-color: #eee;
          width: 100%;
        }
        #colLeft {
          background-color: #ff8b8b;
          height: 48px;
          width: 100px;
          float: left;

        }
        #colMiddle {
          height: 48px;
          text-align: center;
          float: left;
          width: 100%;
          margin-left: -100px; /* negative colLeft width */
          margin-right: -150px; /* negative colRight width */
        }
            #colMiddleInner
            {
                margin-left: 100px;
                margin-right: 150px;
                height: 48px;
                background: #c9ffc3;
            }
        #colRight {
          background-color: #c3d0ff;
          height: 48px;
          width: 150px;
          float: left;
        }
      </style>

   </head>

   <body>
      <div id="parent" style="width:100%">
          <div id="colLeft">left</div>
          <div id="colMiddle">
            <div id="colMiddleInner">
              title
            </div>
          </div>
          <div id="colRight">right</div>
      </div>

   </body>
</html>
于 2012-12-15T00:28:41.527 に答える
1

これにアプローチするより簡単な方法は、次のような HTML 構造を使用することです。

<div id="parent" style="width:100%">
    <div id="colLeft">left</div>
    title
    <div id="colRight">right</div>
<div>

左右の div を適切な側にフロートさせ、親のテキストの配置を中央に設定します。テキストなどの中央の div のスタイルは、親に適用できます。

于 2012-12-14T23:56:32.520 に答える
-1

幅を定義する必要があります...

    #colLeft {
      background-color: #ff8b8b;
      height: 48px;
      width: 50px
      display: inline;
    }
    #colMiddle {
      background-color: #c9ffc3;
      height: 48px;
      display: inline;
      width: auto;
      text-align: center;
    }
    #colRight {
      background-color: #c3d0ff;
      height: 48px;
      width: 50px;
      display: inline;
    }

注: のデフォルト値widthは auto です。

于 2012-12-14T23:56:36.047 に答える