帶有文本換行符的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列

回答

相關問題