0

お互いの間に2つの列が必要です。最初のものは背景画像である必要があります。画像の「最小」サイズで。他の2つは同じサイズである必要があります。

私がそれにテキストを書くならば、div彼のものに改行をするべきです。

実はこんな感じです

  <style type="text/css">
    body
      {
        background-color:#484848;
      }

      #wrapper 
      {
        width: auto;
        margin: 0 auto;
        display: inline-block;
      }
     .col 
     {
        display: block;
        background: #FFF;
        float: left;
        height: 200px;
        width:100%;
     }

  </style>

<body>
  <div id="wrapper">
    <div class="col" style=
    "background-image:url(img/Logo.jpg); 
     width:101px; 
     height:200px;
     background-repeat:no-repeat;"><--! in same line actually -->
    </div>

    <div class="col">
      <table border="0">
        <tr>
          <td>username</td>
          <td><input type="text"></td>
        </tr>
        <tr>
          <td>password</td>
          <td><input type="password"></td>
        </tr>
        <tr>
          <td></td>
          <td><input type="submit" value="login"></td>
        </tr>
      </table>
    </div>
    <div class="col">
      text
    </div>
  </div>
</body>

しかし、それは本当に悪く見えます...

4

2 に答える 2

2

http://jsfiddle.net/hZPDt/のようなものをお探しですか?

あなたが欲しいものを正確に説明してください

body {
  background-color: #484848;
}

#wrapper {
  margin: 0 auto;
}

.col {
  display: block;
  background: #FFF;
  float: left;
  height: 200px;
  width: 32.1%;
  margin: .6%;
  background-color: #FF0;
}
于 2012-09-01T17:21:47.230 に答える
1

JS フィドル: http://jsfiddle.net/6qmvx/

あなたの質問を理解できれば、答えは非常に簡単です。問題は次のとおりです。

.col {
    width: 100%;
}

% 幅を削除し、次のような絶対幅を追加します。

.col {
    display: block;
    background: #FFF;
    float: left;
    width: 300px;
    height: 200px;
    border: 1px dotted red;
}

何が起こっているかを説明するのに役立つように、境界線を追加しました。最初の div の幅を手動でオーバーライドしているため、これは例に従って機能するはずです。

于 2012-09-01T17:20:37.167 に答える