Question

我有一个div里面有两个花车。左边包含一个图像。右侧浮动包含文本。我希望文本保留在图像的旁边，但是当文本太大时，会扩展到下面的内容，我不能阻止它这样做，而是按下下面的内容。

我一直在玩溢出并环顾堆栈交换，但我只是不确定如何让它推倒。我真的在寻找一个简单的CSS修复，但我似乎无法找出什么/在哪里/如何！

在移动设备上查看时，这确实存在问题

代码

<div id="pcontents">
<div class="clearfix">
                    <div id="pthumbdiv" style="float:left;"><div class="pthumb"><?php echo get_the_post_thumbnail(); ?> </div></div>
                        <div id="ptextdiv" style="float:left;">
                        <span class="ptitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
<span class="pcontent-text"><?php the_excerpt(); ?></span>
</div>

Answer 1

首先，如果你使用定义你的CSS。例如（.ptextdiv {...}）这些规则只会应用于那个CLASS的元素而不是那个ID，因此在你的代码中，ptextdiv的定义实际上并没有实际应用于任何东西。

我测试了代码并删除了位置：绝对;声明导致底部div中的文本被删除。那是你想要的吗？

对对象使用绝对定位会从文档流中完全删除该对象，因此绝对定位的元素永远不会向下推送任何其他内容。

Answer 2

您应将 .ptitle 元素设置为 relative ，而不是绝对。

.ptitle {
   position: relative;
}

至少它对我有用。要进一步格式化，请使用边距和填充，以便您希望元素在页面中对齐。

Answer 3

在这种情况下，无需在任何地方使用绝对位置。有图像＆amp;它旁边的文本包含在DIV中并浮动父级和子级DIV。这将允许文本保留在图像旁边。

也将容器浮在下方并声明相同的宽度。这将解决问题。

Answer 4

删除位置：.ptitle上的绝对值添加宽度：20％到pthumbdiv，宽度：80％到ptextdiv，将float：left添加到两者。

Answer 5

用以下内容替换您的css代码： Here is fiddle 你在用。而不是#in id

.clearfix:after {
  clear:both;
  content:".";
  display:block;
  height:0;
  line-height:0;
  visibility:hidden;
  margin-bottom:13px;

}

.clearfix {
position:relative;

}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}

.pimage {
  width: 100%;
  margin: 0;
  max-width: 600px;
}

.pimage-class {
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: 600px;
}

#ptextdiv {
    width:80%;
    height:auto;
}


.ptitle {
    font-size:20px;
    font-weight:bold;
    padding-top:7px;
    height:inherit;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;  
        overflow: hidden;

}

.ptitle a{
    text-decoration:none;
}

.ptitle a:hover {   
    text-decoration:none;
    color:#FC0;

}

#pthumbdiv {
    width:20%;
    position:relative;

}

.pthumb {
    max-width:48px;
    max-height:48px;
    padding: 0;
    margin-right:15px;
    -webkit-border-radius: 55px;
    -moz-border-radius: 55px;
    -khtml-border-radius: 55px;  
    border-radius: 55px;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.pcontent {
    width:600px;
}

如何防止浮动内容与下面的其他内容重叠

5 个答案: