变焦后元素的位置被另一个元素改变和隐藏

Question

问题是，在变焦后.clinical_form元素改变其位置，并且被.clinical_btn_download元素覆盖。是否有办法在每次放大或缩小后保持相同的结构而不重新定位？

下面是我的css脚本。

select{ 

margin-bottom: 1%; 
margin-top: -3%; 
margin-left: 16%; 

} 

.section_line{ 

margin-top: 2%; 
margin-bottom: 2%; 
border-bottom: 1% solid #DADADA; 
border-radius: 3%; 
background-color: #99CCFF; 
width: 100%; 

} 

.clinical_form { 


float: right; 
margin-top: -8%; 
margin-right: 30%; 
margin-bottom: 2%; 


} 
.clinical_time_tabHeader{ 

margin-top: 0.5%; 
text-decoration: underline; 
margin-bottom: 1%; 
font-weight: bold;  
} 

.upload_clinical *{ 

display:inline; 

} 
.cl_tb_btn_validate{  

margin-right:10%; 

} 
.clinical_btn_download { 

margin-top: 1%; 
margin-bottom: 1%; 
width:66.5%; 

} 
.cl_tb_btn_newdataset { 


margin-bottom: 2%; 
margin-top: 2%; 

} 

我的HTML块是这样的：

<div class = "tab" id="clinical_timebased_tab">  
<div class="clinical_time_tabHeader">Time based</div> 

<button type="button" class="clinical_btn_download">Download form</button><br> 

<div class="clinical_tb_set" id="clinical_tb_set_1"> 
    <div class="clinical_tb_set_header">Clinical Set 1</div> 

    <div class="clinical_tb_treatment"> 
     <div class="clinical_tb_selectTreatm_header">Select Treatment</div> 
     <select size="0" class="clinical_tb_selectTreatm"> 

     </select> 
    </div> 


    <div class="clinical_tb_parameter"> 
     <div class="clinical_tb_parameterSelect_header">Clinical parameter</div> 
     <select size="0" class="clinical_tb_parameterSelect"> 

     </select> 
    </div> 

    <div class="clinical_tb_sample"> 
     <div class="clinical_tb_sample_header">Sample type</div> 
     <select size="0" class ="clinical_tb_sampleSelect"> 

     </select> 
    </div> 

    <form class="clinical_form" enctype="form-data"> 

     <div class="upload_clinical_header">Upload clinical form</div> 
     <input type="file" class ="clinical_file" text="upload form..."   accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/> <br> 
     <button class="remove_file" disabled="true">Remove</button> 
     <input type="button" class="cl_tb_btn_upload" value="Upload" disabled="true"/> 
     <input type="button" class="cl_tb_btn_validate" value="Validate" disabled="true"/>    

    </form> 

</div> 

<button type="button" id="cl_tb_btn_newdataset">Add set</button> 

<div id="dialog_popup" title=""></div> 

</div> 

Answer 1

的问题是，您使用的margin-top定位您的表单元素：-8％和保证金右：30％。这会将表格移出正常流程，虽然由于浮动权利而占用右侧空间，但实际内容会左移并上移，因此会与其他内容发生冲突。一种解决方案可以是将表单浮动到左侧，将div分配到左侧，这样它们都在同一行上，对于较小的屏幕，它们将自动堆叠在彼此之上，如下所示：

form.clinical_form { 
    float: left; 
    margin-left: 10%; 
    margin-bottom: 2% 
} 

div.clinical_tb_sample { 
    float: left; 
} 

http://jsfiddle.net/Xt95y/

此螺钉了选择的取向，因为含父母具有不同的尺寸，因为最后一个是不再，因为浮体的屏幕的填充宽度：左，所以我使它恒定，则可以改变它并玩它

select { 
    margin-left:80px; 
}