Question

我希望彼此之间有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>

但它真的很糟糕......

Answer 1

寻找类似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;
}

Answer 2

JS小提琴：http://jsfiddle.net/6qmvx/

如果我理解你的问题，那么答案很简单 - 问题在于：

.col {
    width: 100%;
}

删除％宽度并添加绝对宽度，如下所示：

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

我添加了边框以帮助说明正在发生的事情。由于您手动覆盖第一个div中的宽度，因此这应该按照您的示例工作。

3列，文字换行

2 个答案: