css - 将内容流出身体的最佳方式

Question

我正在研究博客布局，其中一些信息（蓝色框）从帖子的正文中取出，如下所示：http: //jsfiddle.net/rhr96/

这样做最好的是什么？

目前我正在做：

position: absolute;  
margin-left: negative value; 

将蓝色框流向左侧。

但我也可以这样做：

position: relative;  
float: left;
right: some px;

这些中的任何一个被认为更好？或者有没有其他方法？

Answer 1

我认为这样做的最好方法，实际上可能是这个（好吧，我说最好，我想在大多数情况下这是一个见仁见智的问题）

HTML：

<div class="container">
    <div class="outside">
        hi
    </div>
    <div class="inside">
        <p>Blah blah blah</p>
    </div>
</div>

CSS：

.container { margin: 20px auto; width: 400px; }

.outside { background: #d8d8d8; float: left; margin: 0 5px 0 0; padding: 5px; }
.inside { background: #000; color: #fff; margin: 5px 0; overflow: hidden; }

显然，您可以在同一页面上重复多次（我想如果这是用于博客文章，您可能会这样做）

编辑：我的答案用于floats将元素从正常流程中取出，overflow: hidden在内容上使用 意味着它不会包裹在浮动元素下方。

（如果你不太了解overflow我建议您阅读它，它可以用于各种事情，例如浮动清除）

Answer 2

简短的回答：POSITION ABSOLUTE

原因：设计师使用position: absolute是因为这是从正常文档流中取出元素的正确方法，使用float: left;不会从文档流中取出蓝框...

编辑：刚刚明白你真正想要什么，我在这里做了一个新的 1，你可以看看..

演示

HTML

<div class="container">
    <div class="block">1</div>
    <div class="content">This is a question</div>
</div>

CSS

.container {
    height: 200px;
    width: 500px;
    border: 1px solid #eeeeee;
    margin: 30px;
    position: relative;
    font-family: Arial;
}

.block {
    position: absolute;
    height: 80px;
    width: 60px;
    background-color: #eeeeee;
    top: 10px;
    left: 10px;
    font-size: 36px;
    text-align: center;
}

.content {
    width: 410px;
    float: right;
    margin: 10px;
    font-size: 18px;
}