Question

我正在尝试将文字.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;
}

Answer 1

尝试使用css参数，例如：

位置：绝对

表示你需要移动的对象，然后是左边的值：00px和右边：00px。

使用position：relative作为主包装div。

P.S。我很少使用div的margin值，因为它在不同的浏览器中以不同的方式解释。

Answer 2

因为浮动的红色div从文档流中取出，虽然文本环绕浮动的红色div，但仍然会根据宽度为100％的父col-6计算边距（显示：块） mainInfo）。因此，您必须将margin-left设置为大于浮动红色div的宽度（300px）。在这种情况下，您可能需要将margin-left设置为400px：

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

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

这是updated demo。

保证金属性不适用于文本div

2 个答案: