如何让一个类/ div的行为像浮动一样？

我在我的页面中心有一个类内的iframe。如果您单击顶部的两个单选按钮中的任何一个，表单将根据您选择的哪一个展开。如果表单向右或向左浮动，当其中一个按钮被按下时，它将展开，并且其下方的灰色区域（雇主和自由职业者文本部分）将在页面上向下移动。当我将表单对齐页面中心时，我无法获得与浮动相关的属性，从而将页面的其余部分向下移动。相反，它只是掩盖了带有文本区域的灰色背景。我的网站是在avidest.com/new。我怎样才能让表格停留在中心，但表现得像浮动一样？这里是我的CSS：如何让一个类/ div的行为像浮动一样？

.main {width:100%; padding:0; margin:0 auto; min-width: 1020px; overflow: hidden;} 
.slider { background: transparent; margin:0 auto; padding:0; height:420px;} 
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;} 
.formbox{ width: 48%; padding: 45px 60px 20px 0px; margin-top: 30px;background-color:#ffffff; 
      border:1px solid black;opacity:0.91;filter:alpha(opacity=91); /* For IE8 and earlier */ 
      border-radius: 10px;margin-left: auto;margin-right: auto;} 
.body { background: #bebebe; border-top: 0px solid; border-color: #e3e3e3; } 
.body_main_page { width:470px; float:left; margin:0; padding:15px 10px;}

这里是HTML：

<div class="main> 
<div class="slider"> 
    <div class="gallery"> 
     <div class="formbox"> form is here </formbox> 
    </div> 
</div> 
<div class="body"> 
    <div class="body_main_page">Freelancer Text is here</div> 
    <div class="body_main_page">Employer text is here</div> 
</div> 
</div>

感谢

来源

2013-03-04 Philip7899

我在Safari浏览器中看到它 – 2013-03-04 20:36:17

我没有问题让它在中心。当表单展开时，我希望它能够像其他内容一样向下推动，就像我将它向右或向左移动一样。现在它只是扩展了它。谢谢。 – Philip7899 2013-03-04 20:38:57

试图改变你的CSS是这样的：

.main {width:100%; padding:0; margin:0 auto; min-width: 1020px; overflow: hidden;} 
.slider { background: transparent; margin:0 auto; padding:0; min-height:420px;} 
.slider .gallery { margin:0 auto; width:980px; min-height:420px; padding:0;} 
.formbox{ width: 48%; padding: 45px 60px 20px 0px; margin-top: 30px;background-color:#ffffff; 
     border:1px solid black;opacity:0.91;filter:alpha(opacity=91); /* For IE8 and earlier  */ 
     border-radius: 10px;margin-left: auto;margin-right: auto;} 
.body { background: #bebebe; border-top: 0px solid; border-color: #e3e3e3; } 
.body_main_page { width:470px; float:left; margin:0; padding:15px 10px;}

不提供固定高度，如果你想有灵活的高度...

来源

2013-03-04 20:40:46 yannisgu

很棒，工作完美。谢谢。你有什么想法如何做到这一点，当它扩展后，表单的边界和灰色背景之间仍然存在一些空间？ – Philip7899 2013-03-04 20:47:39

在.formbox定义中添加“margin-bottom：30px;” – yannisgu 2013-03-04 20:54:58

太好了，再次感谢。我对我的理解感兴趣，为什么不在表单未扩展时添加边距？ – Philip7899 2013-03-04 21:06:19

如何让一个类/ div的行为像浮动一样？

回答

相关问题