Question

我陷入了最简单的事情之一......我看不出有什么问题，为什么我的段落文本不会溢出按钮容器（位于包装器的右下角）。

代码： 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：因为它似乎不够明显： enter image description here

这就是我的目标。

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/

Answer 2

希望这就是你所需要的。

position: absolute;

而不是

position: relative;

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

Answer 3

浮动元素通常会使文本环绕它，仅当文本出现在浮动元素之后。在您的情况下，文本不会包围div（使用一个按钮类），因为此div显示在标记中的文本之后。

如果您编辑标记以使浮动元素出现在文本之前，那么这将解决您的问题。例如 - 如果您只是在第二段之前移动按钮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>

文本不会溢出浮动div

3 个答案: