边距属性不适用于文本 div答案

【问题标题】：margin property not working for text div边距属性不适用于文本 div
【发布时间】：2014-04-15 14:26:37
【问题描述】：

我正在尝试将文本 .col-6 .about 移动到图像的右侧，但没有任何效果。

CSS

.mainInfo
{
    height:500px;
    background-color: pink;

}

.col-6 .imagePlaceholder
{
    float: left;
    width:300px;
    height:420px;
    margin:30px 0 30px 30px;    
    background-color: red;
}

.col-6 .about
{
    display: block;
    margin-left:100px;
    padding:1em;
}

【问题讨论】：

使用margin:30px 30px 30px 30px; - jsfiddle.net/M4rDD/1 ?
边距：30px;在 .col-6 中或使用溢出：隐藏在 .about 中，像这样 jsfiddle.net/M4rDD/2
或这样jsfiddle.net/M4rDD/3

标签： html css margin

【解决方案1】：

尝试使用css参数，例如：

位置：绝对

对于您需要移动的对象，然后将值设置为 left:00px 和 right:00px。

对主包装 div 使用 position:relative。

附言我很少为 div 使用边距值，因为它在不同的浏览器中以不同的方式解释。

【讨论】：

【解决方案2】：

因为浮动的红色 div 已从文档流中取出，并且虽然文本围绕浮动的红色 div，但仍会根据父级 col-6 计算边距，其宽度为 100%（显示：块） mainInfo)。所以你必须将margin-left 设置为大于浮动红色div 的宽度（即300px）。在这种情况下，您可能必须将margin-left 设置为400px：

.col-6 .about {
  display: block;
  margin-left:400px;
  padding:1em;
}

我添加了这个答案以表明 margin-left 仍然有效。您也可以设置浮动红色 div 的边距（如 JunM 作为评论发布）。

这里是updated demo。

【讨论】：