文本不会溢出浮动div

Question

我遇到了最简单的问题之一...我不知道为什么我的段落文本无法溢出包含在wrapper底部右下角的按钮容器。

这里是JS Fiddle链接：http://jsfiddle.net/8q7cexL9/1/ 对应的代码：

HTML

<div class="what-wrapper">
    <div class="what-box">
        <h1>What we do</h1>
        <p class="what-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quiss nosstrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute r in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
        </p>
        <p class="what-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mauis aute r in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. gna aliqua. Ut enim ad minim veniam, quiss nosst eu fugiat nulla parruduis aute r in reprehen eu arderit in voluptate velit.
        </p>
        <div class="button">Explore our facilities</div>
    </div>
</div>

CSS

.what-box {
    border: 1px solid #ededed;
    padding: 3%;
    width: 80%;
    position: relative;
    margin: 0 auto;
    border-radius: 15px;
    overflow: auto;
}

h1 {
    font-size:30px;
    color:red;
}

p.what-text {
    font-size: 13px;
    padding: 1% 0;
}

.button {
    font-size: 20px;
    color: #00396F;
    border: 1px solid;
    border-radius: 5px;
    padding: 2%;    
    float: right;
}

感谢您的帮助，E。 e:因为似乎不太明显： 这就是我想要的。

- Entalpia

---

那么你想要溢出什么？是按钮中的文本？在.what-box中的按钮还是.what-box本身内部的文本？ - Erik Terwan

我的水晶球告诉我，这个链接就是你需要的。 - web-tiki

可能是 https://dev59.com/w3RB5IYBdhLWcg3wz6ed 的重复问题 - 这表明只有使用JavaScript才可能实现。 - Rhumborl

Answer 1

你可以按照这种格式排列文本和图片。

text text text  ------------
text text text  | button   |
text text text  |          |
text text text  ------------
text text text text text text
text ...

这是良好的格式。您可以查看此内容。

http://jsfiddle.net/swapnilmotewar/4adprz48/

- Swapnil Motewar

---

但我不想这样安排...我说过，我希望按钮在右下角，段落文本在左侧溢出它。 - Entalpia

Answer 2

希望这是你所需要的。

position: absolute;

替代

position: relative;

在.what-box中。这是链接http://jsfiddle.net/8q7cexL9/1/

- Sridhar DD

---

我曾经看过那个，但当文本变长时，它开始重叠。 - Rhumborl

不，它不会表现得像那样。您可以在此链接中检查：http://jsfiddle.net/8q7cexL9/1/ - Sridhar DD

Answer 3

浮动元素通常会使文本环绕它，仅当文本出现在浮动元素之后时。在您的情况下，由于这个带有类名为button的div出现在文本之后，所以文本不会环绕它。

如果您编辑标记使浮动元素出现在文本之前，那么这将解决您的问题。例如-如果您只是将button div移动到第二段落之前，它将给您所需的行为。

不要更改任何样式。只需像以下示例一样编辑标记即可解决问题。

<div class="what-wrapper">
    <div class="what-box">
        <h1>What we do</h1>
        <p class="what-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quiss nosstrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute r in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <div class="button">Explore our facilities</div>
        <p class="what-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mauis aute r in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. gna aliqua. Ut enim ad minim veniam, quiss nosst eu fugiat nulla parruduis aute r in reprehen eu arderit in voluptate velit.</p>
    </div>
</div>

- Vik