mehrab1387
چهارشنبه 28 فروردین 1392, 23:53 عصر
دوستان من 4 تا دایو کنار هم قرار میدم و بهشون درصد میدم هم به خودشون و هم به مارگین و خوب کار میکنه و وقتی زوم رو کم میکنم بهم نمیریزه اما من میخوام به دایو هام بوردر بدم که وقتی میدم بهم میریزه وقتی زوم کم میشه:
لطفا کمک کنید مثلا این نمونه :
body
{
direction: rtl;
}
#block_1
{
float: right;
width: 41%;
margin-right:0.25%;
}
#block_2
{
float: right;
width: 20%;
margin-right:0.25%;
}
#block_3
{
float: right;
width: 20%;
margin-right:0.25%;
}
#block_4
{
float: left;
width: 17%;
margin-left:0.25%;
}
#wrapper:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrapper
{
width:986px;
margin: 0px auto;
background-color:#00FFCC;
}
/*\*/
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="block_1">
<h2>Block 1</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p><a href="/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</div>
<div id="block_2">
<h2>Block 2</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p><a href="/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</div>
<div id="block_3">
<h2>Block 3</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p><a href="/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</div>
<div id="block_4">
<h2>Block 4</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p><a href="/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</div>
</div><!-- close div#wrapper -->
</body>
</html>
این بدون border هست و درست هست و بهم نمیریزه اما اگر به همشون بدیم :
border:1px solid #000;
وقتی زوم کم بشه اخرین دایو پایین مایفته .
کمک کنید
ممنونم
لطفا کمک کنید مثلا این نمونه :
body
{
direction: rtl;
}
#block_1
{
float: right;
width: 41%;
margin-right:0.25%;
}
#block_2
{
float: right;
width: 20%;
margin-right:0.25%;
}
#block_3
{
float: right;
width: 20%;
margin-right:0.25%;
}
#block_4
{
float: left;
width: 17%;
margin-left:0.25%;
}
#wrapper:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrapper
{
width:986px;
margin: 0px auto;
background-color:#00FFCC;
}
/*\*/
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="block_1">
<h2>Block 1</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p><a href="/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</div>
<div id="block_2">
<h2>Block 2</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p><a href="/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</div>
<div id="block_3">
<h2>Block 3</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p>Filler</p>
<p><a href="/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</div>
<div id="block_4">
<h2>Block 4</h2>
<p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<p>Filler</p>
<p>Filler</p>
<p><a href="/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</div>
</div><!-- close div#wrapper -->
</body>
</html>
این بدون border هست و درست هست و بهم نمیریزه اما اگر به همشون بدیم :
border:1px solid #000;
وقتی زوم کم بشه اخرین دایو پایین مایفته .
کمک کنید
ممنونم