如何阻止div元素受到文本换行符的影响?

Question

因此，当窗口调整大小时，它强制段落文本分成更多行。这很好，但是我在元素的底部有一个按钮，它受到新行的影响。新的线条把那个元素往下推。我怎样才能阻止这一切?

当我调整窗口的大小时，文本的高度增加了，这迫使按钮在容器中向下。我要把按钮固定住。即使，假设文本与按钮重叠。我尝试了按钮上的position:absolute，但那不起作用。

另外，我不希望按钮的高度或上下边距受到文本占用的行数的影响。即使没有收缩窗口，div2上的按钮也会被按下，因为文本比其他两个div多出一行。

除此之外，我有3个并排的div都在底部有相同的按钮。我的中间div有更多的文本，它比其他两行多了一行…所以div1文本有3行，div2文本有4行，div3文本有3行。div2按钮比其他两个按钮略低，因为div有4行文本而不是3行……我怎么才能阻止这一切?

.container div p {
font-family: $smallText;
font-weight: 400;
margin: 0;
padding: 0.625rem 1.875rem 0 1.875rem;
color: $transparentWhite;
font-size: 0.938rem;
}
.container button {
position: relative;
margin-left: 3.125rem;
margin-top: 9rem;
margin-bottom: 0.625rem;
border-radius: 1.875rem;
padding: 0.938rem;
width: 9.375rem;
border: none;
}

<div class="container">
<div class="sedans">
<h1>SEDANS</h1>
<p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
<button class="button1" type="button">Learn More</button>

Answer 1

这并不是说新行影响了元素，而是你的按钮的9rem向下推得太远了。请参阅我的代码:

.container div p {
font-family: $smallText;
font-weight: 400;
margin: 0;
padding: 0.625rem 1.875rem 0 1.875rem;
color: $transparentWhite;
font-size: 0.938rem;
}
.container button {
position: relative;
margin-left: 3.125rem;
margin-top: 2rem;
margin-bottom: 0.625rem;
border-radius: 1.875rem;
padding: 0.938rem;
width: 9.375rem;
border: none;
}

<div class="container">
<div class="sedans">
<h1>SEDANS</h1>
<p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
<button class="button1" type="button">Learn More</button>

Answer 2

也许一个固定高度的布局加上一个灵活的文本框就可以了。这将使按钮保持在底部。缺点是您必须指定容器高度，这对于响应式开发来说有点令人讨厌。理想情况下，你应该让内容自然流动。

.flex-wrapper {
display: flex;
flex-direction: column;
height: 300px;
background: pink; /* demo only */
padding: 15px;
}
.flex-wrapper h1,
.flex-wrapper .button-box {
flex: none;
background: #ddd; /* demo only */
overflow: hidden; /* demo only */
}
.flex-wrapper p {
flex: auto;
font-family: $smallText;
font-weight: 400;
margin: 0;
padding: 0.625rem 1.875rem 0 1.875rem;
color: $transparentWhite;
font-size: 0.938rem;
}
.container button {
position: relative;
border-radius: 1.875rem;
padding: 0.938rem;
width: 9.375rem;
border: none;
}

<div class="container">
<div class="flex-wrapper sedans">
<h1>SEDANS</h1>
<p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p>
<p class="button-box">
<button class="button1" type="button">Learn More</button>
</p>
</div>
</div>