ورود

View Full Version : سوال: جلوگیری از تغییر سایز HTMLElement وقتی متنش پاکسازی می شه



ROSTAM2
پنج شنبه 22 شهریور 1403, 21:37 عصر
سلام این ها Tag Div خستند که توی خودشون تگ h2 و h3 دارن و کلاس box برای استایل
اما وقتی h3 متن نداشته باشه تغییر سایز می ده! با چه Element یا استایلی از HTML می شه از این تغییر سایز جلوگیری کرد؟؟؟!

156058


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<style type="text/css">
body {margin:0;

font-family: 'Baloo Bhaijaan 2';
}
input
{ width:94%;
height: 20px;
background: #e0dede;
justify-content: center;
display: flex;
margin: 0px;
padding: 3px;
/* border: none;
outline: none; */
border-radius: 5px;
font-size: medium;
font-family:'Baloo Bhaijaan 2';
}
/* .header {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0px;
width: 100%;
padding: 20px;
margin: 10px;

} */
.content{


/* margin: 0;
padding: 0; */
/* overflow: hidden; */
position: fixed;
/* background-color: whitesmoke; */
/* width: 100%; *?
/* padding: 20px; */
margin: 140px 10px 10px 10px;
}
.header{
padding: 5PX 10px;
margin: 10px 0px 0 0px;
display: block;
/* position: fixed; */
border-radius: 10px;
background-color: #333;
color: white;
border-color: chartreuse;
border-width: medium;
box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 5px;

}

#PersonalInfp{
padding: 5PX 10px;
margin: 10px 0px 0 0px;
display: block;
/* position: fixed; */
border-radius: 10px;
background-color: #333;
color: white;
border-color: chartreuse;
border-width: medium;

}

.content td{
/* color: maroon; */
text-align: center;
white-space: nowrap;
border-width:1px;
border-left: 1px;
border-left-color: black;
border-left-style: solid;

/* border-bottom-width:1px;
border-bottom-color: blue;
border-bottom-style: solid; */
}
.content tr:nth-child(even) {
background-color: #D6EEEE;
}

/* .content tr{


padding: 7PX 15px;
display: inline-table;
border-radius: 10px;
width: 100%;



border-width:1px;
border-color: blue ;
border-style: solid ;

} */
.header td{

color: white;
text-align: center;
white-space: nowrap;
/* border-width:1px;
border-left: 1px;
border-left-color: white;
border-left-style: solid; */
}




.active {
background-color: #04AA6D;
}
button
{
width: auto;
height: 40px;
padding: 10px 20px 10px 20px;
margin: 10px ;
justify-content: center;
display: inline-block;
color: #fff;
background: #573b8a;
font-family: inherit;
font-size: 14px;
font-weight: bold;
margin-top: 20px;
outline: none;
border: none;
border-radius: 5px;
transition: .2s ease-in;
cursor: pointer;
/* font-family: 'Baloo Bhaijaan 2'; */
}

button:hover{
background: green;
}
button:active{
background: silver;
}
.box{
display: inline-block;
margin: 5px 0 0 0;
padding: 10px 10px 0px 10px ;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 5px;
}
hr{ margin: 0;

}
h3, h3{
padding: 0;
margin: 0;
content: '&nbsp';
}
</style>

</head>
<body dir="rtl">


<!--<ul id="columns">
</ul>-->
<!--<table id="FieldsTable" style="width: 100%;margin-top:35px;background-color: #333;" border="0" cellspacing="0" cellpadding="0">
</table>-->

<table width="100%" align="center" style="text-align: center !important">
<tr>
<td>
<table class="header" width="auto" cellpadding="0" cellspacing="0" border="0" >
<col width="100%" />
<tr>
<td style="text-align: right !important;" >اطلاعات پایگاه</td>
</tr>
</table>
<table id="BaseInfoTable" width="100%" cellpadding="0" cellspacing="0" border="0" >
<col width="100%" />
<tr>
<td>
<div class="box">
<h3>استان</h3>
<hr>
<div style="text-align: center">
<h3 id="Shire">8</h3>
</div>
</div>
<div class="box">
<h3>ناحیه</h3>
<hr>
<div style="text-align: center">
<h3 id="Area">8</h3>
</div>
</div>
<div class="box">
<h3>حوزه</h3>
<hr>
<div style="text-align: center">
<h3 id="Scope">8</h3>
</div>
</div>
<div class="box">
<h3>عنوان پایگاه</h3>
<hr>
<div style="text-align: center">
<h3 id="Base">8</h3>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="header" width="auto" cellpadding="0" cellspacing="0" border="0" >
<col width="100%" />
<tr>
<td style="text-align: right !important;" >اطلاعات فردی</td>
</tr>
</table>
<table id="PersonalImfo" width="100%" cellpadding="0" cellspacing="0" border="0" >
<col width="100%" />
<tr>
<td>
<div class="box">
<h3>نام و نام خانوادگی</h3>
<hr>
<div style="text-align: center">
<h3 id="FullName">8</h3>
</div>
</div>
<div class="box">
<h3>کد ملی</h3>
<hr>
<div style="text-align: center">
<h3 id="NationalCode">8</h3>
</div>
</div>
<div class="box">
<h3>تاریخ تولد</h3>
<hr>
<div style="text-align: center">
<h3 id="BirthDate">8</h3>
</div>
</div>
<div class="box">
<h3>نام پدر</h3>
<hr>
<div style="text-align: center">
<h3 id="ParentName">8</h3>
</div>
</div>
<div class="box">
<h3>نام محلّه</h3>
<hr>
<div style="text-align: center">
<h3 id="SectorName">8</h3>
</div>
</div>
<div class="box">
<h3>شماره مجازی</h3>
<hr>
<div style="text-align: center">
<h3 id="CyberNumber">8</h3>
</div>
</div>
<div class="box">
<h3>شماره تماس</h3>
<hr>
<div style="text-align: center">
<h3 id="PhoneNumber">8</h3>
</div>
</div>
</td>

</tr>

</table>
</td>
</tr>
<tr>
<td>
<table class="header" width="auto" cellpadding="0" cellspacing="0" border="0" >
<col width="100%" />
<tr>
<td style="text-align: right !important;" >
نوع عملکرد</td>
</tr>
</table>
<table id="PerformanceTable" width="100%" cellpadding="0" cellspacing="0" border="0" >
<col width="100%" />
<tr>
<td>
<div class="box">
<h3>آدرس کانال (لینک کامل)</h3>
<hr>
<div style="text-align: center">
<h3 id="ChannelURL">8</h3>
</div>
</div>
<div class="box">
<h3>آی.دی کانال</h3>
<hr>
<div style="text-align: center">
<h3 id="ChanelID">8</h3>
</div>
</div>
<div class="box">
<h3>نوع پلتفرم</h3>
<hr>
<div style="text-align: center">
<h3 id="Platform">8</h3>
</div>
</div>
<div class="box">
<h3>تعداد اعضای کانال</h3>
<hr>
<div style="text-align: center">
<h3 id="Followers"></h3>
</div>
</div>
<div class="box">
<h3>پروفایل (متناسب با چارچوب رسانه محلّه)</h3>
<hr>
<div style="text-align: center">
<h3 id="profile"></h3>
</div>
</div>
<div class="box">
<h3>بیوگرافی (توضیحات کانال در بیو، لینک کانال، آی.دی ادمین جهت ارتباط گیری)</h3>
<hr>
<div style="text-align: center">
<h3 id="Biography"></h3>
</div>
</div>
<div class="box">
<h3>قالب مشخص روزانه(شرو و پایان مشخص، فعالیت روزانه)</h3>
<hr>
<div style="text-align: center">
<h3 id="ActivityTime">8</h3>
</div>
</div>
<div class="box">
<h3>انتشار اخبار و رخدادهای محلی و محتوای جذاب(آپلود حداقل 10 محتوا در روز)</h3>
<hr>
<div style="text-align: center">
<h3 id="ShareContent">8</h3>
</div>
</div>
<div class="box">
<h3>پیگیری مطالبات مردمی</h3>
<hr>
<div style="text-align: center">
<h3 id="FollowUp">8</h3>
</div>
</div>
<div class="box">
<h3>نوع عملکرد</h3>
<hr>
<div style="text-align: center">
<h3 id="Rate">8</h3>
</div>
</div>
</td>

</tr>

</table>
</td>
</tr>
</table>







</body>
</html>

ROSTAM2
پنج شنبه 22 شهریور 1403, 23:56 عصر
تعیین یک اندازه مشخص برای ارتفاع div نظم اشیاء را در خانه table بهم می ریخت که با تنظیم خصوصیت display از کلاس box به inline-table این مشکل رفع شد:

.box{
display: inline-block;
margin: 5px 0 0 0;
padding: 10px 10px 0px 10px ;
border-radius: 5px;
display:inline-table;
position:;
box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 5px;
}


156059

mazoolagh
شنبه 24 شهریور 1403, 09:02 صبح
فکر کنم اگر بجای div خالی، یک &nbsp; هم درونش بذارین درست بشه.