Question

这是我的代码

.pa {
  width: 400px;
  background: #008000;
  position: relative;
}

.icon-wrap {
  height: 100%;
  float: right;
  width: 30px;
  background: yellow;
  padding: 5px;
  position: absolute;
  top: 0px;
  right: 0px;
}

<div class="container">
  <div class="pa">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text Text
    <div class="icon-wrap">
      <a><i class="fa fa-camera pull-right"></i></a>
    </div>
  </div>
</div>

Fiddle Example

如您所见，黄色div与父div的文本重叠。
我只想包装文字以防止这种重叠。
我该如何解决？

更新说明：
添加padding-right:30px可以，但是...
有什么方法可以解决仅更改.icon-wrap类的问题吗？

Answer 1

尝试根据您的要求正确填充，重叠的问题将得到解决。

.pa
{
  padding-right:30px;
}

Answer 2

您可以使用flex并消除绝对定位的需要：

.pa {
  width: 400px;
  background: #008000;
  display: flex;
}

.icon-wrap {
  min-width: 30px;
  background: yellow;
  padding: 5px;
}

<div class="container">
  <div class="pa">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text Text
    <div class="icon-wrap">
      <a><i class="fa fa-camera pull-right"></i></a>
    </div>
  </div>
</div>

Updated fiddle

Answer 3

由于.pa的{{1}}是position，唯一避免重叠的方法是将内部内容填充正确设置为30px或更改其宽度：

fiddle here

absolute

.pa
{
  width:400px;
  background:#008000;
  position:relative;
}
.p{width: calc(100% - 30px);}
.icon-wrap
{
  height:100%;
  float:right;
  width:30px;
  background:yellow;
  padding:5px;
  position:absolute;
  top:0px;
  right:0;
}

Answer 4

您有一个absolute的{{1}} div。因此，您将width:30px设置为包含文本的padding-right:30px。希望这有道理。

Answer 5

您可以使用padding-right: 30px;和width: calc(400px - 30px);

让我知道您是否有任何疑问。

.pa {
    width: calc(400px - 30px);
    background: #008000;
    position: relative;
    float: left;
    word-wrap: break-word;
    padding-right: 30px;
}

<div class="container">
 <div class="pa">
 Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 


<div class="icon-wrap">
<a><i class="fa fa-camera pull-right"></i></a>
</div>
</div>
</div>

Answer 6

仅更改.icon-wrap类吗？
然后，制作.icon-wrap类样式right: -40px;

Answer 7

.pa {
  width: 400px;
  background: #008000;
  position: relative;
}

.icon-wrap {
  height: 100%;
  width: 30px;
  background: yellow;
  float:right;
  padding: 5px;
  position: absolute;
  top: 0px;
 left:100%;
}

<div class="container">
  <div class="pa">
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text Text
    <div class="icon-wrap">
      <a><i class="fa fa-camera pull-right"></i></a>
    </div>
  </div>
</div>

父div内的div与文本重叠

7 个答案: