Question

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

这样做最好的是什么？

目前我在做：

position: absolute;  
margin-left: negative value;

将蓝框移动到左侧。

但我也可以这样做：

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

这些都被认为更好吗？或者还有其他方法吗？

Answer 1

简答：POSITION ABSOLUTE

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

编辑：只是明白你真正想要的东西，在这里我做了一个新的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;
}

Answer 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，那么它对各种事情都很有用，例如浮动清算）

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

2 个答案: