텍스트 줄 바꿈이있는 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

원하는 내가 div 태그를 통해 침입하려는 대신 – jondinham

'범위'태그를 사용하는지 설명하지만 작품을 해달라고하십시오 :( – Roby

http://jsfiddle.net/hZPDt/과 같은 것을 찾고 계십니까?

당신이 'DIV'태그에 의해 생성 된 휴식을 원하지 않는 경우, 정확하게

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 { 
    width: 100%; 
}

515,는 % 폭을 제거하고 다음과 같이 절대 폭 뭔가를 추가 :

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

나는 무슨 일이 일어나고 있는지 설명하기 위해 국경을 추가했습니다. 첫 번째 div에서 수동으로 너비를 무시하므로이 예에 따라 작동해야합니다.

출처

2012-09-01 17:20:37 Makita

텍스트 줄 바꿈이있는 3 열

답변

관련 문제