html - 按钮旁边的多行文本而不使用浮动

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

注意：IE7 和更早版本不支持 inline-block，所以要小心。对于较旧的 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;
}