Доброго времени суток.Столкнулся со следующей проблемой : есть блок с бекграундом, и вложенные в него хаотично расположенные блоки-визитки.При уменьшении окна браузера в firefox или chrome нижние вложенные блоки сползают,также дергается текст внутри вложенных блоков.В чем может быть проблема?
<!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>
<div id = "block4">
</div>
<div id = "block5">
</div>
<div id = "block6">
</div>
<div id = "block7">
</div>
<div id = "block8">
</div>
<div id = "block9">
</div>
<div id = "block10">
</div>
</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;
}
#block4{
width: 165px;
height: 45px;
border:1px solid black;
position: relative;
top:3px;
left:420px;
}
#block5{
width: 187px;
height: 47px;
border:1px solid black;
position: relative;
top:4px;
left:120px;
}
#block6{
width: 163px;
height: 60px;
border:1px solid black;
position: relative;
top:-45px;
left:312px;
}
#block7{
width: 155px;
height: 45px;
border:1px solid black;
position: relative;
top:-55px;
left:520px;
}
#block8{
width: 208px;
height: 72px;
border:1px solid black;
position: relative;
top:-30px;
left:1px;
}
#block9{
width: 187px;
height: 109px;
border:1px solid black;
position: relative;
top:-96px;
left:220px;
}
#block10{
width: 200px;
height: 70px;
border:1px solid black;
position: relative;
bottom:215px;
left:430px;
}
.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;
} |