css媒体查询调整margin-top两个div

时间：2017-04-03 06:08:34

标签： css media-queries css-position margin

我有两个div元素。我想调整位置第二div取决于高度第一div。我试着改变第二个div的上边缘。当我调整屏幕大小时，这个边缘变化。

这是我的初始屏幕

enter image description here

第一个div是

enter image description here

第二个div是

enter image description here

当我调整屏幕大小时，它会发生

enter image description here

这些是css样式第二个div 

@media only screen and (max-width: 2560px) and (min-width: 1920px) {
   .my-list{
   margin-top:5%;}
   .my-list li {
    float: left;
    height:10%;
    margin-right:5%;
    width: 20%;

}
.my-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ACBFF6;
    height: 10%;



}
   .my-list li a {
    display: block;
     color: #0c3aaa;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    padding-top:3%;
    text-align: center;
    text-decoration: none;
    height: 10%;
   font-size:18px;
   width:100%;
}

}
@media only screen and (max-width: 1920px) and (min-width: 1024px) {
 .my-list{
 }
   .my-list li {
    float: left;
    height:10%;
    margin-right:5%;
    width: 20%;

}
.my-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ACBFF6;
    height: 20%;



}
   .my-list li a {
    display: block;
     color: #0c3aaa;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    padding-top:1%;
    text-align: center;
    text-decoration: none;
    height: 10%;
   font-size:18px;
   width:100%;
}

   }
@media only screen and (max-width: 1024px) {
   .my-list{
   }
   .my-list li {
    float: left;
    height:50%;
    margin-right:5%;
    width: 20%;

}
.my-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ACBFF6;
    height: 50%;



}
   .my-list li a {
    display: block;
     color: #0c3aaa;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    padding-top:3%;
    text-align: center;
    text-decoration: none;
    height: 10%;
   font-size:18px;
   width:100%;
}

}

@media only screen and (max-width: 800px) {
    .my-list{
   }
   .my-list li {
    float: left;
    height:60%;
    margin-right:5%;
    width: 20%;

}
.my-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ACBFF6;
    height: 60%;



}
   .my-list li a {
    display: block;
     color: #0c3aaa;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    padding-top:3%;
    text-align: center;
    text-decoration: none;
    height: 60%;
   font-size:18px;
   width:100%;
}

} 


@media only screen and (max-width: 700px) {
    .my-list{
  }
   .my-list li {
    float: left;
    height:60%;
    margin-right:5%;
    width: 20%;

}
.my-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ACBFF6;
    height: 60%;



}
   .my-list li a {
    display: block;
     color: #0c3aaa;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    padding-top:3%;
    text-align: center;
    text-decoration: none;
    height: 60%;
   font-size:18px;
   width:100%;
}

}  


@media only screen and (max-width: 600px) {
    .my-list{

   width:100%;}
   .my-list li {
    float: left;
    height:50%;
    margin-right:1%;
    width: 100%;

}
.my-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ACBFF6;
    height: 50%;
    width:100%;
     background-size: 100% 100%;



}
   .my-list li a {
    display: block;
     color: #0c3aaa;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    padding-top:3%;
    text-align: center;
    text-decoration: none;
    height: 50%;
   font-size:18px;
   width:100%;
}

}  

@media only screen and (max-width: 300px) {
    .my-list{
   }
   .my-list li {
    float: left;
    height:50%;
    margin-right:5%;
    width: 100%;

}
.my-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ACBFF6;
    height: 50%;
    width:100%;




}
   .my-list li a {
    display: block;
     color: #0c3aaa;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    padding-top:10%;
    text-align: center;
    text-decoration: none;
    height: 50%;
   font-size:18px;
   width:100%;
}

}

这是html代码

<body>

<%@include file="../menu/header.jsp"%>

    <div style="position:relative;margin-top:5%;" class="my-list">
        <ul style="width:100%;position:absolute;">
            <li style="margin-left:10%;margin-top:1%;margin-bottom:1%;"><a 
                href="<c:url value="/encuesta/realizar" >
                            </c:url>">Realizar Nueva Encuesta</a></li>
                <li style="margin-top:1%;margin-bottom:1%;"><a href="<c:url value="/historico/inicio" >
                              <c:param name="misEncuestas" value="T"/>
                            </c:url>">Hist&#243;rico de Encuestas</a></li>
                        <li style="margin-top:1%;margin-bottom:1%;"><a href="#">Resultados Globales</a></li>

        </ul>
    </div>

</body>
</html>

这包括第一个div 

<%@include file="../menu/header.jsp"%>

如何根据高度或位置第一个div设置位置第二个div？我是否必须在每个媒体查询屏幕中更改margin-top？

被修改

header.jsp中

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset=ISO-8859-1 "/>
<title>EcalcpAdmin: Cabecera imagen</title>

<script type="text/javascript"
    src="${pageContext.request.contextPath}/resources/js/jquery-1.9.1.min.js?version=<%@include file="/WEB-INF/jsp/version.txt" %>"></script>
    <script type="text/javascript"
    src="${pageContext.request.contextPath}/resources/js/jquery-ui.js">
    </script>



    <script type="text/javascript"
        src="${pageContext.request.contextPath}/resources/js/bootstrap.js?version=<%@include file="/WEB-INF/jsp/version.txt" %>"></script>



<link
            href="${pageContext.request.contextPath}/resources/css/bootstrap.css?version=<%@include file="/WEB-INF/jsp/version.txt" %>"
            rel="stylesheet" type="text/css"></link>    











<style type="text/css">


.header-content-ajuste1 {
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: middle;
    padding-top: 3px;
    padding-bottom: 3px;
    }

   .header-content-ajuste {
    padding-left: 1%;
    padding-right: 1%;
    vertical-align: middle;
    padding-top: 1%;
    padding-bottom: 2%;
     background: #ff230d url(${pageContext.request.contextPath}/resources/imgecalcp/fondoencabezado_marron.png) no-repeat left top;
     background-size: 100% 100%;
}


.header {
    background-color: rgb(211,38,11);
    color: #fff;
    font-size: 20px;
    margin: 0px;
    margin-bottom: 1px;
    vertical-align: middle;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1001;
    text-align: left;


}




@media only screen and (max-width: 1024px) {
    body {
        height:20%;
        width: 100%;
    }
}
@media only screen and (max-width: 300px) {
    body {
        height:5%;
        width: 30%;
    }
}

@media only screen and (max-width: 600px) {
    body {
        height:5%;
        width: 60%;
    }
}  
.header .dropdown {

}



.header  .dropdown-menu
{
    background-color: rgb(214,230,247);
    max-height: none;
    border: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}   

.header .dropdown-toggle:focus, .dropdown-toggle:active
{
    color: #CDE8FF;
    text-decoration:none;
}


.content {
  width: 100%;
}

.paragraphs1 {


  margin-left: 60%;

}
.paragraphs2 {


   margin-left:60%;
   margin-top:1%;
}

    </style>

</head>
<body>
<fmt:parseDate pattern="ddMMyyyy HH:mm:ss" value="${datosCabeceraObj.fechaAcceso}"  var="fechaAccesoToken"/>


            <fmt:formatDate type="both" dateStyle="long"            
            value="${fechaAccesoToken}" var="fechaAccesoFormat" />

<div  class="header">           
<div class="header-content-ajuste">

<div style="float: left; vertical-align:middle;">
            <img src="${pageContext.request.contextPath}/resources/css/images/logo-cabecera-sedeDGCP.gif" style="margin: 0px 0px 0px 0px;" alt="Clases pasivas (LOGO)"/>
        </div>

<div>
<div class="tituloprincipal" style="float: left; vertical-align:middle;padding:10px 0px 10px 20px;">ECALCPADMIN</div>   
<div class="paragraphs1">

   <div  class="titulosegundo" style="display:inline-block;" >
        <spring:message code="label.Usuario" />
</div>
<div  class="titulosegundo" style="display:inline-block;" > 
        :
</div>
<div class="titulosegundo" style="display:inline-block;" >  
                 ${datosCabeceraObj.nombreUsuario}
</div>



</div>


<div class="paragraphs2">
<div  class="titulosegundo" style="display:inline-block;">  
        <spring:message code="label.FechaAcceso" />
</div>
<div class="titulosegundo"  style="display:inline-block;" > 
        :
</div>
<div class="titulosegundo" style="display:inline-block;" >  
                 ${fechaAccesoFormat}
</div>
<div style="display:inline-block;margin-left:5%;">  
    <div  id="dropDownHelp" class="dropdown" style="display: inline-block; cursor:pointer;">
        <a class="dropdown-toggle"  style="color: white;display:inline-block;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Ayuda
                            <span class="caret"></span>
                        </a>
                        <ul id="dropDownHelpHeader" class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a id="linkHelpAbout" href="<c:url value="/home/about"/>">Acerca de</a></li>
                        <li><a id="linkHelpSupport" href="<c:url value="/home/support"/>">Soporte t&#232;cnico</a></li>
                                <li><a id="linkHelpDocumention" href="<c:url value="/home/documentation"/>">Documentaci&#243;n</a></li>



                        </ul>

                        </div>
</div>  
</div>

</div>



</div>



</div>


        </body>
</html>

1 个答案:

答案 0 :(得分：0)

在

.my-list ul { }

添加

top: 100px; /*adjust as needed or try a % instead of px*/
相关问题
最新问题