Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/37.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 如何使类/div表现为浮动?_Css_Css Float_Margin_Centering_Floating - Fatal编程技术网

Css 如何使类/div表现为浮动?

Css 如何使类/div表现为浮动?,css,css-float,margin,centering,floating,Css,Css Float,Margin,Centering,Floating,我在页面中心的类中有一个iframe。如果单击顶部的两个单选按钮中的任何一个,则窗体将根据您选择的单选按钮展开。如果表单向右或向左浮动,当按下其中一个按钮时,表单将展开,其下方的灰色区域(雇主和自由职业者文本部分)将在页面上向下移动。当我在页面的中心对齐表单时,我无法使其具有与浮动相关联的属性,该属性会向下移动页面的其余部分。相反,它只是用文本区域覆盖灰色背景。我的网站在。我怎样才能使窗体保持在中间,但却表现得像漂浮的一样?这是我的css: .main {width:100%; padding:

我在页面中心的类中有一个iframe。如果单击顶部的两个单选按钮中的任何一个,则窗体将根据您选择的单选按钮展开。如果表单向右或向左浮动,当按下其中一个按钮时,表单将展开,其下方的灰色区域(雇主和自由职业者文本部分)将在页面上向下移动。当我在页面的中心对齐表单时,我无法使其具有与浮动相关联的属性,该属性会向下移动页面的其余部分。相反,它只是用文本区域覆盖灰色背景。我的网站在。我怎样才能使窗体保持在中间,但却表现得像漂浮的一样?这是我的css:

.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>

尝试如下更改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;}

如果您想拥有灵活的高度,请不要提供固定的高度…

我在Safarim的中心看到了它,我在中心没有问题。当表单扩展时,我希望它像向左或向右浮动一样向下推动其余内容。现在它只是在它上面扩展。谢谢。太好了,做得很好。谢谢您是否知道如何使其在扩展后,表格边框和灰色背景之间仍有一些空间?在.formbox定义中添加“边距底部:30px;”太好了,再次感谢。我对我的理解很感兴趣,为什么不在表格没有扩展的情况下增加边距呢?