使元素与浮动元素的边框相邻

Question

我想让一个白色的指针伸出右浮动的段落。这是我到目前为止所取得的成就。它远非完美，因为当我调整屏幕大小时指针不想粘在边框上。解决方法是什么？

#batu {
  float: none;
  clear: both;
    position: relative;
    background: url(https://pp.userapi.com/c836431/v836431507/5a2cd/Zc9FsOzRLdY.jpg) no-repeat;
    max-width: 1170px;
    background-size: cover; /* Never used this before */
}
#batu::after {
  content: '';
  display: block;
  float: none;
  clear: both;
  overflow: nidden;
}

#batu .overlay-content {
    float: right;
    width: 40%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    min-height: 517px; /* the height of the background image*/
}

.pointer {
    position: absolute;
    top: 48%;
    left: 48%;
    width: 10px;
    height: 24px;
    background: url(https://s8.hostingkartinok.com/uploads/images/2017/08/96ad387742f9e8fce21c53f42fe45984.png) no-repeat;
}

<div id="batu">
    <div class="pointer"></div>
    <div class="overlay-content">
        <h4>Batu</h4>
        <p>blablablablablablablablablablablabla
        blablablablablablablablablablablablablb
        blablablablablablablablablablablablabla
        blablablablablablablablablablablablablb
        </p>
     </div>
</div>

Answer 1

我修改了你的代码。检查此 https://jsfiddle.net/osxo2vzL/。您需要将 word-wrap: break-word; 放在您的段落标记中。

Answer 2

如果你可以让你的 pointer 成为 overlay-content 中的 after 伪元素会更容易:

将position: relative添加到overlay-content

伪after元素可以如下：

#batu .overlay-content::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  width: 10px;
  height: 24px;
  background: url(https://s8.hostingkartinok.com/uploads/images/2017/08/96ad387742f9e8fce21c53f42fe45984.png) no-repeat;
}

参见下面的演示：

#batu {
  float: none;
  clear: both;
  position: relative;
  background: url(https://pp.userapi.com/c836431/v836431507/5a2cd/Zc9FsOzRLdY.jpg) no-repeat;
  max-width: 1170px;
  background-size: cover;
  /* Never used this before */
}

#batu::after {
  content: '';
  display: block;
  float: none;
  clear: both;
  overflow: hidden;
}

#batu .overlay-content {
  float: right;
  width: 40%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  min-height: 517px;
  /* the height of the background image*/
  position: relative;
}


/*
.pointer {
    position: relative;
    top: 48%;
    left: 48%;
    float: right;
    width: 10px;
    height: 24px;
    background: url(https://s8.hostingkartinok.com/uploads/images/2017/08/96ad387742f9e8fce21c53f42fe45984.png) no-repeat;
}
*/

#batu .overlay-content::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  width: 10px;
  height: 24px;
  background: url(https://s8.hostingkartinok.com/uploads/images/2017/08/96ad387742f9e8fce21c53f42fe45984.png) no-repeat;
}

<div id="batu">
  <!--<div class="pointer"></div>-->
  <div class="overlay-content">
    <h4>Batu</h4>
    <p>blablablablablablablablablablablabla blablablablablablablablablablablablablb blablablablablablablablablablablablabla blablablablablablablablablablablablablb
    </p>
  </div>
</div>

使元素与浮动元素的边框相邻

Make an element adjacent to the border of a floated element

html

css

css-float

pseudo-element