float를 사용하지 않고 단추 옆에 여러 줄 텍스트

Question

float를 사용하지 않고 배수 줄의 큰 단추 옆에 텍스트를 표시하고 싶습니다. 나는이 http://img13.imageshack.us/img13/8343/capturaft.jpg

같은 것이 가능하다을보고 싶어

div{ 
    background: red; 
    width: 100%; 
} 

button{ 
    height: 200px; 
} 

p{ 
    display: inline; 
} 

http://jsfiddle.net/dbZB2/

:

이 내 코드

<div> 
    <button>Boton</button> 
    <p>asasd asd asdasdas dsadasdas dasd sdsfasdasd sadsadas da sdasdasdasd asdasdasdasd dassda sdasdasd</p> 
</div> 

이 CSS입니까?

Answer 1

일부 너비를 추가하고 inline 대신 inline-block을 사용해보십시오.

jsFiddle

참고 : 인라인 블록이 IE7에서 지원 및 이전 있으므로주의해야되지 않습니다. 예전 IE 버전의 경우 사용할 수 있습니다 *display:inline;zoom:1;

Answer 2

위와 거의 같습니다.하지만 조금 깔끔하게 정리했습니다. 예를 들어 원하는대로 사용할 수 있습니다. 행운을 빕니다!

JSFIDDLE

HTML

<div class="example"> 
    <button>Button</button> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
</div> 

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
.example { 
    position: relative; 
    background: red; 
    width: 100%; 
} 
p, button { 
    display:inline-block; 
} 
button { 
    width:140px; 
    height: 70px; 
    vertical-align:top; 
    margin: 10px 5px; 
} 
p { 
    width:200px; 
    margin: 0 3px; 
    padding:5px; 
}