如何在屏幕宽度发生变化时阻止两个内部div的重叠

我有三个blurb，每个都包含图像，标题，段落和按钮（从上到下）。我的问题是，当屏幕大小展开时，段落开始重叠按钮。按钮位置需要在每个街区保持一致。它目前定位为绝对值，具有40像素的底部属性。我打算修正只有HTML/CSS或Jquery。任何帮助深表感谢。谢谢。如何在屏幕宽度发生变化时阻止两个内部div的重叠

.history_link { 
 
    position: relative; 
 
    width: 33.33%; 
 
    height: 599px; 
 
} 
 

 
.history_link h3 { 
 
    text-align: center; 
 
} 
 

 
.learn_btn { 
 
    margin-top: 20px; 
 
    width: 150px; 
 
    padding: 10px; 
 
    position: absolute; 
 
    bottom: 40px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.rs_caption p { 
 
    width: 80%; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    padding-top: 30px; 
 
    text-align: center; 
 
} 
 

 
.history_link img { 
 
    width: 60%; 
 
    margin-left: 20%; 
 
    margin-left: 20%; 
 
    padding: 35px 0px 0px 0px; 
 
}

<div class="history_link col span_4"> 
 
    <div class="why_rs_link"> 
 
    <img src="<?php bloginfo('template_directory'); ?>/img/history_icon.png" /> 
 
    <h3>Our History</h3> 
 
    <div class="rs_caption"> 
 
     <p>Founded by teacher and mentor Patricia DeOrio, herself dyslexic, we’ve always understood what it takes to unlock the potential of children with learning differences.</p> 
 
     <a href="http://riversideschool.rpmdevserver.com/our-history/"> 
 
     <h2 class="learn_btn">LEARN MORE</h2> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

button with absolute positioning displaying correctly

button with absolute positioning with overlap when screen size expands

来源

2017-10-06 sanzanobi

是否确定了你的情况来指定'为div的最小height'？ –

绝对定位将元素从当前文档流中取出，并且相对于最接近的定位父项进行定位。如果没有定位祖先元素，那么这将相对于视口（浏览器窗口）。在你的屏幕截图中没有理由使用绝对定位。您的设计是一个容器中的三个垂直堆叠元素。另外，当您提供HTML示例时，请提供生成的标记（即不包含PHP）。 – hungerstar

绝对定位从当前文档流中取出元素（不占用空间）并且相对于最接近定位的祖先而定位。如果没有放置祖先元素，则该元素将相对于视口（浏览器窗口）进行定位。这就是为什么你的按钮以不同的视口尺寸叠加你的文本。

在你的截图中没有理由使用绝对定位。您的设计是一个容器中的三个垂直堆叠元素。这是块级元素的默认流程，占用了容器元素的全部宽度，并从它自己的行/行开始。

顶部将按钮保留在底部，您需要确保每个组件只占用一定的空间量，即设置一些子组件的高度，如p。虽然我会自己去找一个flexbox解决方案，所以设计不那么僵硬，因为您不必设置任何高度。

flex-grow: 1;告诉p填充容器元件的剩余空间，从而推动了解更多链接到.card元件的底部。

下面演示了如何简化标记并使其更加语义化（请勿使用h2作为阅读更多链接）。

.row { 
 
    display: flex; 
 
} 
 
.card { 
 
    display: flex; 
 
    flex-direction: column; 
 
    box-sizing: border-box; 
 
    width: 33.33333%; 
 
    padding: 1.5rem; 
 
    text-align: center; 
 
    font-family: "Droid Sans", Arial, sans-serif; 
 
    background-color: steelblue; 
 
} 
 

 
.card img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 

 
.card p { 
 
    flex-grow: 1; 
 
}

<div class="row"> 
 
    <div class="card"> 
 
    <img src="https://placehold.it/300x300/fff"> 
 
    <h3>Title</h3> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat nihil accusamus numquam praesentium ipsum aspernatur deserunt. 
 
    </p> 
 
    <a href="#">Learn More</a> 
 
    </div> 
 

 
    <div class="card"> 
 
    <img src="https://placehold.it/300x300/fff"> 
 
    <h3>Title</h3> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
    </p> 
 
    <a href="#">Learn More</a> 
 
    </div> 
 

 
    <div class="card"> 
 
    <img src="https://placehold.it/300x300/fff"> 
 
    <h3>Title</h3> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat nihil accusamus numquam praesentium ipsum aspernatur deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat nihil accusamus numquam praesentium ipsum aspernatur deserunt. 
 
    </p> 
 
    <a href="#">Learn More</a> 
 
    </div> 
 
</div>

来源

2017-10-06 16:59:41 hungerstar

感谢您花时间解释此解决方案。这非常有帮助。我今天早上将它写入了我的代码，它解决了我的问题。 – sanzanobi

很高兴我能帮到你！请接受解决方案。 – hungerstar

固定宽度和高度会影响响应性。尝试用填充或边距规则替换它。你也可以设置最小（最大） - 高度，最小（最大） - 宽度。并且一定要使用视口;）

来源

2017-10-06 16:42:51

如何在屏幕宽度发生变化时阻止两个内部div的重叠

回答

相关问题