Question

我有一个主div（block-main）和几个嵌套的div元素。嵌套div必须包含图片和文本。当我尝试在Firefox或Chrome中重新调整窗口大小时，文本会不稳定地移动。在IE中，视图会保持不变。可能是什么问题？这里是js小提琴：https://jsfiddle.net/2jkebu2b/

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <title>tt</title>
</head>
<body>
    <div id ="block-main">
    <div id = "block1">
        <img class="part-img" src="img/part1.png" alt=""/>
        <div class="part-info">
        <ul class="mini-list">
       <li>
        <a class = "mini-link" href="">"Wines that consumer scan enjoy and trust"</a></li>
           <li><p class = "mini-par">Darrel Joseph</p></li>
  </li>
    </ul>
        </div>
    </div>
    <div id = "block2">
    </div>
    <div id = "block3">
    </div>
</body>
    </html>

body{
    width: 1024px;
    height: 800px;
    border:1px solid black;
    margin: 0 auto;
}

#block-main{
    width: 559px;
    height: 434px;
    background: url(img/lines-block.png) no-repeat;
    border: 1px solid black;
    margin-top: 110px;
    margin-left: 193px;

 }
#block1{
    width: 180px;
    height: 43px;
    border:1px solid black;
    position: relative;
    top:20px;
    left:215px;
}
#block2{
    width: 182px;
    height: 43px;
    border:1px solid black;
    position: relative;
    top:10px;
    left:405px;
}
#block3{
     width: 135px;
     height: 55px;
     border:1px solid black;
     position: relative;
     top:22px;
     left:270px;
 }
.part-img{
    float: left;
    display:inline-block;
    padding-right: 10px;
}
.part-info{
    max-width: 138px;
    height: 50px;
    border: 1px solid black;
    position: relative;
    margin-left:45px;
}
.mini-list{
    list-style-type: none;

}
.mini-list li{
    padding:0;
}

.mini-link{
    position: absolute;
    margin-left: -35px;
    margin-top: -10px;
    font-size: 8px;
    font-family: verdana;
    color:#990027;
    padding: 0;
}

.mini-par{
    font-size: 7px;
    font-family: verdana;
    color: grey;
    margin-left: -35px;
    margin-top: 11px;
    position: absolute;
}

文本在Firefox和Chrome中查看时会失败

0 个答案: