不使用浮動按鈕旁邊的多行文本

Question

我想在不使用浮動的情況下在多個行中的大按鈕旁邊顯示一些文本。

這是我的代碼

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

這個CSS：

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

button{ 
    height: 200px; 
} 

p{ 
    display: inline; 
} 

http://jsfiddle.net/dbZB2/

我希望看到這樣的事情 http://img13.imageshack.us/img13/8343/capturaft.jpg

這可能嗎？

Answer 1

您將不得不添加一些寬度，並嘗試使用inline-block而不是inline。

jsFiddle

注：inline-block的不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; 
}