将内容流出身体的最佳方式答案

【问题标题】：Best way to flow content out of the body将内容流出身体的最佳方式
【发布时间】：2012-12-08 00:07:49
【问题描述】：

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

这样做最好的是什么？

目前我在做：

position: absolute;  
margin-left: negative value;

将蓝色框向左流动。

但我也可以这样做：

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

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

【问题讨论】：

我更喜欢绝对定位和负左边距，但最好的方法是构建您的 html，这样您就不必“取出”
是的，但这是故意的。我想以靠近身体的方式在那个盒子里显示一些东西。
我的意思更像这样：jsfiddle.net/BBTRD/1 深灰色区域仍然是您的“主体”和主要内容区域，但它更具语义性并且不使用负边距
谢谢！负边距是否被视为不好？
并非如此，它们通常都很好。但是，如果可以更语义化地完成某些事情，而不需要将某些内容从其“流动”位置移出，那么我通常完全赞成

标签： css css-float positioning css-position

【解决方案1】：

简答：POSITION ABSOLUTE

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

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

Demo

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;
}

【讨论】：

@Andy 从帖子正文中取出了一些信息（蓝色框）
谢谢！我刚刚查看了 stackoverflow 的答案结构：答案的正文和赞成的内容与表格结构分开。也许这是第三种方法。
@marchello 哦，现在我知道了，所以你需要像 stackoverflow 这样的布局......你可以查看我的答案......我之前回答过......
是的，但我不想隐藏它。我希望它喜欢我原来的小提琴的方式，我只是好奇这样做的最佳方式是什么。也许stackoverflow中的这个表格解决方案是更好的浏览器支持？ @Alien：检查一下
@marchello 表格应该被忽略，这是石器时代设计布局的方法，你现在有一个强大的 CSS，你应该去 div 除非并且直到数据不是表格格式

【解决方案2】：

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

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不太了解，我建议reading about it，它可以用于各种事情，例如浮动清除）

【讨论】：

谢谢，是的，这将是一篇博文。发布正文，并在其左侧的日期旁边。