带有文本换行符的3列

我想在彼此之间有2列。在第一个应该是一个背景图像。与图像的“最小”大小。其他2应该有相同的大小。带有文本换行符的3列

如果我写了一个文本，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>

，但它确实很糟糕......

来源

2012-09-01 Roby

如果你不想被“格”标签创建的突破，用“跨度”的标签，而不是 – jondinham

我想通过div标签打破，但它不工作:( – Roby

寻找类似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-01 17:21:47 sabithpocker

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

如果我明白你的问题，然后答案很简单 - 问题在这里：

删除％宽度和增加的绝对宽度，这样的事情：

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

我已经添加边框来帮助说明是怎么回事。由于您手动覆盖第一个div的宽度，因此应按照您的示例进行操作。

来源

2012-09-01 17:20:37 Makita

带有文本换行符的3列

回答

相关问题