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

**ROSTAM2** · پنج شنبه 22 شهریور 1403, 21:37 عصر

سلام این ها Tag Div خستند که توی خودشون تگ h2 و h3 دارن و کلاس box برای استایل
اما وقتی h3 متن نداشته باشه تغییر سایز می ده! با چه Element یا استایلی از HTML می شه از این تغییر سایز جلوگیری کرد؟؟؟!

SharedScreenshot.jpg



<!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;

	}

SharedScreenshot.jpg

**mazoolagh** · شنبه 24 شهریور 1403, 09:02 صبح

فکر کنم اگر بجای div خالی، یک   هم درونش بذارین درست بشه.

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

ابزار های تاپیک

نمایش

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

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

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

تاپیک های مشابه

آخرین اخبار باشگاه تراکتورسازی تبریز از وب سایت تی اف نیوز (تبریز فوتبال نیوز)

سوال: تنظیم کنترل های فرم به صورتی که با تغییر سایز فرم جای کنترل ها تغییر نکند.

تغییر سایز قسمتی از فرم

تغییر سایز (رفت و برگشتی)

سوال: چگونه وقتی کاربر عرض ویندوز را تغییر سایز میدهد طول متناسب با آن تغییر کند؟

قوانین ایجاد تاپیک در تالار