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％和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/

这会搞乱选择的对齐，因为包含的父项具有不同的大小，因为最后一个不再是屏幕的填充宽度，因为浮动：左，所以我使它保持不变，你可以改变它和它一起玩

select {
    margin-left:80px;
}

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

1 个答案: