PDA

View Full Version : سوال: مشکل خط وسط دو div با در واحد %


mehbod.rayaneh
یک شنبه 24 شهریور 1392, 16:16 عصر
سلام
من 2 تا دیو دارم ک در کنار هم قرار میگیرن و میخوام دقیقا وسطشون 1 خط بندازم!
اندازه 2 تا دیو را با % مشخص کردم! مثلا (width:50%)
تنها راهی ک برای انداختن خط ب ذهنم رسید این بود ک بیام اندازه دیوها را 49% بدم و 1 درصد border بدم بهشون تا خط وسط را ایجاد کنن!
ولی الان 1 مشکلی هست! اندازه border با پیکسله! :متعجب:
با تغییر سایز مرورگر این پیکسل باعث ب هم ریختن قالب میشه!!! :افسرده:
ب نظرتون بهترین راه برای انداختن این خطه چیه؟
راستی ...اینو را هم بگم :
نمیتونم از دیو جداگانه استفاده کنم برای وسط این دوتا! چون قراره قالب وردپرس بشه و این کلا میشه 1 حلقه و ...
راه پیشنهادی شما چیه؟
Omid Jackson
یک شنبه 24 شهریور 1392, 16:35 عصر
border-right: solid 1em #000000;
mehbod.rayaneh
یک شنبه 24 شهریور 1392, 16:48 عصر
ممنون دوست من ولی نشد!
اول تست کنید بعد کد بذارید!
Omid Jackson
یک شنبه 24 شهریور 1392, 16:57 عصر
ممنون دوست من ولی نشد!
اول تست کنید بعد کد بذارید!
برای اینکه این 1 برابر مقدار تگ پدر رو به ارث میبره، در صورتی که تگ پدر تغییر اندازه بده این هم تغییر میکنه
البته عذرخواهی میکنم من فکر کردم رو زوم کردن میگین
mehbod.rayaneh
یک شنبه 24 شهریور 1392, 17:04 عصر
تگ "والد" ک توی همه سایزها درصد هست! پس دلیلی برای تغییر نداره! من وقتی 0.1em بدم ینی 0.1 % دادم! درسته؟
ولی متاسفانه کار نمیده!
کدها :


<style>
#main{width:100%;min-height:300px;direction:rtl}
#main article{width:45.8%;float:right;margin-top:30px;padding:1% 2%}
#main article:first-child{border-left: solid 0.1em #000000;}
#main article:last-child{border-right: solid 0.1em #000000;}
</style>
<section id="main">
<article>
<header>
عنوان مطلب
</header>
<p>
متن انتخابی جهت راهنمایی برای دانلود استاندارد مورد نظر از سایت ما
متن انتخابی جهت راهنمایی برای دانلود استاندارد مورد نظر از سایت ما
</p>
<footer>
<a href="#">بیشتر بدانید ...</a>
</footer>
</article>

<article>
<header>
عنوان مطلب
</header>
<p>
متن انتخابی جهت راهنمایی برای دانلود استاندارد مورد نظر از سایت ما
متن انتخابی جهت راهنمایی برای دانلود استاندارد مورد نظر از سایت ما
</p>
<footer>
<a href="#">بیشتر بدانید ...</a>
</footer>
</article>
</section>
Omid Jackson
یک شنبه 24 شهریور 1392, 17:36 عصر
با border-image مشکل حل نمیشه؟
http://w3schools.com/cssref/css3_pr_border-image.asp
mehbod.rayaneh
یک شنبه 24 شهریور 1392, 18:07 عصر
چجوری ینی؟! عکس نداریم ک!!!
qartalonline
یک شنبه 24 شهریور 1392, 18:18 عصر
فک کنم اگه از پس زمینه استفاده کنید برای div والد مشکل برطرف بشه.
mehbod.rayaneh
یک شنبه 24 شهریور 1392, 18:22 عصر
فک کنم اگه از پس زمینه استفاده کنید برای div والد مشکل برطرف بشه.
میشه بیشتر توضیح بدید؟ اگه توی کد نمونه ک گذاشتم باشه خیلی بهتره!:) ممنون
qartalonline
یک شنبه 24 شهریور 1392, 18:39 عصر
کد زیر رو تست کنید.
البته به جای عکس پس زمینه یه تصویر انتخاب کنید که خط عمود داشته باشه.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
.body{
background:#f0f url(0.jpg) center no-repeat;
display:block;
marign:0;
}
.left{
float:left;
width:50%;
display:block;
}
.right{
float:right;
width:50%;
display:block;
}
</style>
</head>

<body>
<div class="body">
<div class="left">left</div>
<div class="right">right</div>
<div style="clear:both;"></div>
</div>
</body>

</html>
mehbod.rayaneh
یک شنبه 24 شهریور 1392, 19:51 عصر
سلام
حل شد ... دقیقا همینه :)
ممنون