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 回答