Float布局下Div定位超出容器问题及组件对齐修复咨询

嘿，我仔细看了你的代码，发现两个核心问题导致布局错乱：第3个div没加左浮动，还有父容器因为子元素全浮动出现了高度塌陷。另外微调一下细节就能达到你想要的对齐效果，下面是完整的修复方案：

问题拆解 #

1. 你明确要求第1、3个子元素左浮，但当前CSS里.cta div:nth-child(3)漏掉了float:left，导致它会占满整行，把第4个订阅div挤到下面去。
2. 父容器.cta的所有子元素都是浮动元素，这会让父容器“塌陷”（高度为0），进而引发各种布局错位。
3. 浮动元素的padding可能会超出设定的50%宽度，导致换行。

修复后的代码 #

HTML（无需修改，和你的原代码一致） #

<div class="cta">
 <div>
 <p>Double Your Sales Today!</p></div>
 <div><p>Use the form below to open his daily email tips and free consultation worth $97.</p></div>
 <div><p>Leader of SEO and Digital Marketing is Giving Away Tips For Doubling Sales Right Now!</p></div>
 <div>[contact-form-7 id="125" title="Subscribe"]</div>
 </div>

修复后的CSS #

.cta{
 background-color:white;
 width:100%;
 padding:10px;
 /* 解决浮动子元素导致的父容器高度塌陷 */
 overflow: hidden;
 /* 如果你不想用overflow，也可以用伪元素清除浮动：
 &::after {
   content: "";
   display: table;
   clear: both;
 }
 */
}
.cta div:nth-child(1){
 width:50%;
 float:left;
 box-sizing: border-box; /* 确保padding不超出50%宽度 */
}
.cta div:nth-child(1) > p{
 margin:0px;
 padding-left:30px;
 padding-bottom:10px;
 display:inline-block;
 font-weight:bolder;
 font-size:40px;
 color:black;
 font-family: 'Roboto Condensed', sans-serif;
}
div.cta div:nth-child(2){
 width:50%;
 float:right;
 box-sizing: border-box;
}
div.cta div:nth-child(2)>p{
 color:black;
 text-align:center;
 font-family: 'Style Script', cursive;
 margin:0px;
 font-size:40px;
 background-color:#ffc569;
 line-height:40px;
 padding:5px;
}
div.cta div:nth-child(3){
 width:50%;
 float:left; /* 补上左浮动，满足你的要求 */
 font-family: 'Roboto Condensed',serif;
 padding-left:25px;
 box-sizing: border-box;
}
div.cta div:nth-child(3)>p{
 color:black;
 font-size:20px;
 font-weight:bold;
 margin:0; /* 去掉默认margin，避免多余间距 */
}
div.cta div:nth-child(4){
 float:right;
 width:50%;
 margin-top:0px;
 padding-left:10px; /* 可选：让表单和右侧内容更对齐 */
 box-sizing: border-box;
}
/*******Mob. Responsive***/
@media only screen and (max-width: 900px){
 div.cta div:nth-child(n),div.cta div:nth-child(n)>p{
 float:none;
 width:100%;
 text-align:center;
 padding-left:0px;
 }
}

关键修复说明 #

• 清除浮动：给.cta加overflow: hidden，让父容器能包裹住所有浮动的子元素，解决高度塌陷。
• 补全左浮动：给第3个div加上float:left，这样它就能和第4个右浮的div各占50%宽度，并排显示。
• 盒模型调整：所有浮动div加box-sizing: border-box，确保padding不会让元素宽度超出50%，避免换行。
• 细节优化：去掉第3个div里p标签的默认margin，减少不必要的间距。

这样修改后，你的四个div就会严格按照要求排列：第1、3左浮，第2、4右浮，每个占50%宽度，订阅表单也会正确对齐到右侧啦～

内容的提问来源于stack exchange，提问作者kunal Aren