html - 缩放后元素的位置被另一个元素更改和隐藏

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 block 是这样的:

<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% 和 margin-right: 30% 定位表单元素。这会将表单移出正常流程，尽管由于向右浮动它会向右占用一个空间，但实际内容会向左和向上移动，因此与其他内容发生冲突。一种解决方案是让表单向左浮动，让 div 向左浮动，这样它们就在同一行上，对于较小的屏幕，它们会自动堆叠在彼此之上，如下所示:

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

div.clinical_tb_sample {
    float: left; 
}

http://jsfiddle.net/Xt95y/

这搞砸了选择的对齐，因为包含父项的大小不同，因为最后一个不再是屏幕的填充宽度，因为 float:left，所以我让它保持不变，你可以改变它和它一起玩

select {
    margin-left:80px;
}