Question

所以我希望我的盒子即使在缩小窗口时也能保持相同的位置。但是就目前而言，当我缩小它们时，它们会调整大小并将浮动框推到底部空间，而不会一起形成一行。

.bodybox1
{           
   border:1px solid black;
   width:45%;            
   background:white;
   margin:1% auto 2% auto;            
   text-align:center;
   font-size:2em;
   padding:3%;
   overflow:hidden;
} 

.boxcoverblack
{
  text-align:center;
  width:120px;
  padding:7%;
  border:1px solid black;
  margin-top:2%;                                                
}

.signuparea
{
  width:30%;
  float:right;
  border:1px solid black;
  text-align:center;
  padding:3%;
  overflow:hidden
} 

.signuptext
{
   text-align:center;
   width:180px;
   padding:7%;
   word-spacing:15px;
   border:1px black solid;           
   line-height:35px;
}      

.freeshipping
{              
  float:left; /*image*/
}

<div class="bodybox1">
  <img class="freeshipping" src="https://via.placeholder.com/500x300" width="500" height="300" >
  <div class="signuparea">

    <div class="signuptext">Sign up to get freeshipping coupon code! ( per phone number ) 
    </div> 
    <div class="boxcoverblack">Sign up</div>

  </div>  
</div>

请帮助我。...

http://jsfiddle.net/abxf6c9h/

Answer 1

您需要使用flexbox和一些安排：使用

display:inline-block

代替

float:left

使用vertical-align：top从包装div中删除自动居中对齐最后

 display:flex;
 flex-wrap:nowrap;

涉及2个div的父级

这是结果 fiddle

Answer 2

.bodybox1 {

  display:flex;
  justify-content:center;
  border: 1px solid black;
  width: 100%;
  background: white;
  margin: 1% auto 2% auto;
  text-align: center;
  font-size: 2em;
  padding: 3%;
  overflow: hidden;
}

尝试一下。我想您希望此框显示为弯曲。告诉我那是否给你一个提示。我刚刚添加了：

display:flex;
justify-content:center;

看我的小提琴：

http://jsfiddle.net/abxf6c9h/1/

修复HTML中的浮动框

2 个答案: