মোড়ানো-চারপাশে সমান আকারের ডিভিড তৈরি করা

17

আমি উপরের এবং নীচে একটি চিত্র এবং পাঠ্য সহ একটি মেনু সিস্টেম তৈরি করার চেষ্টা করছি। তথ্য গতিশীল। আমি মেনু সিস্টেমটি উপস্থিত হতে চাইছি যাতে প্রতিটি চিত্র একে অপরের চিত্রের সমান দূরত্বে থাকে যাতে তারা উভয় অনুভূমিক এবং উল্লম্বভাবে চিত্রগুলির গ্রিডে রেখায়।

সমস্যাটি হচ্ছে পাঠ্য। যদি পাঠ্যটি চিত্রের চেয়ে দীর্ঘ হয় তবে ডিভটি প্রসারিত হয়। তবে চিত্রগুলি একে অপরের সাথে সমানভাবে ফাঁক না থাকায় এটি একটি বিশ্রী চেহারা দেখার ফাঁক তৈরি করে।

এটিকে চারপাশে কাজ করার জন্য আমি মনে করি যে সর্বোত্তম পদ্ধতিটি হ'ল বড় ডিভের আকার গ্রহণ করার জন্য অন্য ডিভগুলির প্রত্যেককেই রাখা উচিত। তবে এটি কীভাবে করবেন তা সম্পর্কে আমি নিশ্চিত নই।

flex-wrapসম্পত্তি ব্যবহার করে আমি ফ্লেক্সবক্স দিয়ে চেষ্টা করেছি । এটি দুর্দান্তভাবে মোড়ানো অবস্থায়, আমি প্রতিটি চিত্রকে একে অপরের থেকে সমান-দূরত্বে দাঁড় করানোর উপায় খুঁজে পাইনি।

আমি কীভাবে এটি অর্জন করতে যাব?

আমার কোডটি নিম্নরূপ:

#outer {
	display: flex;
}
#main {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 20px;
}
.section {
	background-color: #ddd;
	padding: 15px;
	
}

.label, .icon {
	text-align: center;
}
<div id="outer">
	<div id="main">
		<div class="section">
			<div class="label">Label 1AAAAAAAAAAA</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 1B</div>
		</div>
		<div class="section">
			<div class="label">Label 2A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 2B</div>
		</div>
		<div class="section">
			<div class="label">Label 3A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 3B</div>
		</div>
		<div class="section">
			<div class="label">Label 4A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 4B</div>
		</div>
		<div class="section">
			<div class="label">Label 5A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
	</div> 
</div>
স্নিপেট প্রসারিত করুন

পুনশ্চ. আমার বিভাগ ডিভগুলি কেন তাদের উচ্চতা বাড়িয়ে দিচ্ছে তা আমি নিশ্চিত নই। সুতরাং এই বিষয়ে যে কোনও অন্তর্দৃষ্টি প্রশংসা করা হবে।

html  css  flexbox 
— kojow7
সূত্র
2
আমার মনে হয় গ্রিড আপনি যা খুঁজছেন
— সিরাজ আলম
1
আইটেমগুলির উচ্চতা বৃদ্ধির কারণ এটি ডিফল্টরূপে align-itemsসেট করা আছে stretch। আপনি সহজেই align-items: flex-start;
— এটিকে
আপনার বর্তমান # মেইনের প্রস্থ 450px । আপনার বিভাগের জন্য যদি আপনার গতিশীল বিষয়বস্তু হয়, যেমন; 350px, তারা সবাই কি একটি নতুন সারি গঠন করবে না? তুমি কি এটাই চাও?
— গোসি
@ গোসি, হ্যাঁ, আমি এটাই চাই।
— kojow7
আপনি বুটস্ট্র্যাপ 4 ক্লাস ব্যবহার করতে পারেন। তুমি কি চেষ্টা করেছিলে?
— রেবতি শাহ

উত্তর:

6

আপনি যদি এটি তৈরি করতে পারেন তবে নিশ্চিত নন যাতে প্রতিটি উপাদানটি সবচেয়ে বড় উপাদানের মতো বড় হয়ে যায় তবে আপনি যদি ধরে নিতে পারেন যে আপনি প্রতিটি সারিতে একটি নির্দিষ্ট সংখ্যক উপাদান চান তবে কেবল তাদের সমান আকার করুন। আমি মনে করি এটি ফ্লেক্সবক্সের পরিবর্তে সিএসএস গ্রিডের সাহায্যে করা অনেক সহজ। নীচের সমাধান দেখুন। আমি বিভাগের উপাদানগুলির অবস্থান নির্ধারণের পাশাপাশি গ্রিডটি ব্যবহার করি এবং প্রতিটি বিভাগের ভিতরে তিনটি অংশের (শীর্ষ পাঠ্য, চিত্র, নীচের পাঠ্য) প্রতিটি ডিভের ঠিক 1/3 অংশ গ্রহণ করে তা নিশ্চিত করতে - এটি নিশ্চিত করার জন্য যে সমস্ত চিত্রগুলি উল্লম্বভাবে সারিবদ্ধ হবে । এছাড়াও পাঠ্যগুলি মাঝখানে রয়েছে (আনুভূমিকভাবে এবং উল্লম্বভাবে) তা নিশ্চিত করতে আমি লেবেলে ফ্লেক্স ব্যবহার করি ।

#outer {
}
#main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 20px;
}
.section {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr 1fr 1fr;
	background-color: #ddd;
	padding: 5px;
  margin: 5px;
  min-width: 80px;
  vertical-align: center;
}

.label, .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  text-align: center;
}
<div id="outer">
	<div id="main">
		<div class="section">
			<div class="label">Label 1AAAAAAAAAAA</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 1B</div>
		</div>
		<div class="section">
			<div class="label">Label 2A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 2B</div>
		</div>
		<div class="section">
			<div class="label">Label 3A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 3B</div>
		</div>
		<div class="section">
			<div class="label">Label 4A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 4B</div>
		</div>
		<div class="section">
			<div class="label">Label 5A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
	</div> 
</div>
স্নিপেট প্রসারিত করুন

— জাকুব রুসিলকো
সূত্র
এটি কাজ করবে না কারণ উপাদানগুলি আকারে স্থির। উদাহরণস্বরূপ, আমি যদি 1AAAAAAAAAAAAAAAAAAAAAAAAAAAA লেবেলটি রাখি তবে উপাদানটি পাঠ্যের সাথে মানানসই নয়।
— কোজো 7
আরে এটা কাজ করবে। আমি তার কোড আপডেট করব। দয়া করে এটি পরীক্ষা করুন।
— রেবতী শাহ
@ কোজো 7 আপনি লেবেলে দীর্ঘ নাম রাখতে পারেন। আশা করি আমরা আপনার অ্যাঞ্জারটি পূরণ করেছি।
— রেবতি শাহ
3

এই দ্রুত কোডপেনকে একটি স্পিন দিন। একটি জিনিস অনুপস্থিত তা হ'ল মিডিয়া ক্যোয়ারীটি কীভাবে আচরণ করতে হয় যখন এটি একটি সারিতে 3 টি কলাম ফিট করতে পারে না যার জন্য আমি যে সমস্ত পরিবর্তন করব তা হ'ল max-widthসম্পত্তি হ'ল 50% - individual item padding left and right - how much space you want betweenএবং এতে পরিবর্তন flex: 1 33%হবেflex: 1 55%

(আপনি প্যাডিং মান লাফালাফি যদি আপনি চান বক্স নির্ধারন সম্পত্তি সঙ্গে এটি এর প্রস্থ পরিবর্তন কিভাবে আপনার বক্স যাতে প্রস্থ কাজ নির্ধারন প্যাডিং অন্তর্ভুক্ত করতে এই )

https://codepen.io/mihaelnikic/pen/bGGPBYG

<div class="container">
    <div class="item">
            <div class="label">Label 5A</div>
            <div class="icon"><img src="https://via.placeholder.com/75"></div>
            <div class="label">Label 5B</div>
    </div>
    <div class="item">
            <div class="label">Label 5A</div>
            <div class="icon"><img src="https://via.placeholder.com/75"></div>
            <div class="label">Label 5B</div>
    </div>
    <div class="item">
            <div class="label">Label 5A</div>
            <div class="icon"><img src="https://via.placeholder.com/75"></div>
            <div class="label">Label 5B</div>
    </div>
    <div class="item">
            <div class="label">Label 5A</div>
            <div class="icon"><img src="https://via.placeholder.com/75"></div>
            <div class="label">Label 5B</div>
    </div>
    <div class="item">
            <div class="label">Label 5A</div>
            <div class="icon"><img src="https://via.placeholder.com/75"></div>
            <div class="label">Label 5B</div>
    </div>
    <div class="item">
            <div class="label">Label 5A</div>
            <div class="icon"><img src="https://via.placeholder.com/75"></div>
            <div class="label">Label 5B</div>
    </div>
</div>

সিএসএস :

.container {
    display: flex;
    flex-flow: row wrap;

    width: 100%;
    justify-content: space-between;
}

.item {

    min-height: 200px;
    background: coral;
    border: 1px solid black;


    flex: 1 33%;
    max-width: calc(33% - 20px - (15px * 2) / 3);
    min-width: 200px;
    margin-bottom: 15px;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;

    padding: 10px;

}
— মাইক এন।
সূত্র
আমার ধারণা আমি এটি যথাসম্ভব একাধিক উপাদানকে ফিট করতে চাই। মিডিয়া প্রশ্নগুলির সাথে এটি করা সহজ হতে পারে না কারণ আপনার প্রতিটি সম্ভাব্য আকারের ডিভের স্ক্রিনের প্রতিটি আকারের জন্য এটি করা দরকার।
— kojow7
3

আমি আশা করি এটি সাহায্য করবে

সিএসএস

#outer {
	display: flex;
}
#main {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 20px;
}
.section {
	/* background-color: #ddd; */
	padding: 10px;
	flex-grow: 1;
  box-sizing: border-box;
  min-width: 50%;
}
.innerSection{
	background-color: #ddd;
	padding: 15px;
}

.label, .icon {
	text-align: center;
}
<div id="outer">
        <div id="main">
          <div class="section">
            <div class="innerSection">
              <div class="label">Label 1AAAAAAAAAAA</div>
              <div class="icon"><img src="https://via.placeholder.com/75"></div>
              <div class="label">Label 1B</div>
            </div>
          </div>
          <div class="section">
            <div class="innerSection">
              <div class="label">Label 2A</div>
              <div class="icon"><img src="https://via.placeholder.com/75"></div>
              <div class="label">Label 2B</div>
            </div>
          </div>
          <div class="section">
            <div class="innerSection">
              <div class="label">Label 3A</div>
              <div class="icon"><img src="https://via.placeholder.com/75"></div>
              <div class="label">Label 3B</div>
            </div>
          </div>
          <div class="section">
            <div class="innerSection">
              <div class="label">Label 4A</div>
              <div class="icon"><img src="https://via.placeholder.com/75"></div>
              <div class="label">Label 4B</div>
            </div>
          </div>
          <div class="section">
            <div class="innerSection">
              <div class="label">Label 5A</div>
              <div class="icon"><img src="https://via.placeholder.com/75"></div>
              <div class="label">Label 5B</div>
            </div>
          </div>
        </div> 
      </div>
স্নিপেট প্রসারিত করুন

#outer {
display: flex;
}
#main {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border: solid black 25px;
border-radius: 25px;
width: 450px;
height: 500px;
padding: 20px;
}
.section {
/* background-color: #ddd; */
padding: 10px;
min-width:50%;
box-sizing: border-box;
}
.innerSection{
background-color: #ddd;
padding: 15px;
}

.label, .icon {
text-align: center;
}

এইচটিএমএল

<div id="outer">
    <div id="main">
      <div class="section">
        <div class="innerSection">
          <div class="label">Label 1AAAAAAAAAAA</div>
          <div class="icon"><img src="https://via.placeholder.com/75"></div>
          <div class="label">Label 1B</div>
        </div>
      </div>
      <div class="section">
        <div class="innerSection">
          <div class="label">Label 2A</div>
          <div class="icon"><img src="https://via.placeholder.com/75"></div>
          <div class="label">Label 2B</div>
        </div>
      </div>
      <div class="section">
        <div class="innerSection">
          <div class="label">Label 3A</div>
          <div class="icon"><img src="https://via.placeholder.com/75"></div>
          <div class="label">Label 3B</div>
        </div>
      </div>
      <div class="section">
        <div class="innerSection">
          <div class="label">Label 4A</div>
          <div class="icon"><img src="https://via.placeholder.com/75"></div>
          <div class="label">Label 4B</div>
        </div>
      </div>
      <div class="section">
        <div class="innerSection">
          <div class="label">Label 5A</div>
          <div class="icon"><img src="https://via.placeholder.com/75"></div>
          <div class="label">Label 5B</div>
        </div>
      </div>
    </div> 
  </div>
— ফাহিম খান
সূত্র
কেবল স্নিপেট কোডটি দেখুন, নীচের কোডটির স্নিপেট আপডেট করা হয়নি
— ফাহিম খান
@ কোজো u আপনি আমার উত্তর দেখতে পাচ্ছেন?
— ফাহিম খান
@ রেবেতি শাহ যদি দ্বিতীয় বাক্সের লেবেলের একটি দীর্ঘ নাম থাকে তবে এটি প্রথম বাক্সের মতো দেখাবে
— ফাহিম খান
তিনি কী চান তার পরিষ্কার চিত্র সম্পর্কে তাকে জিজ্ঞাসা করুন। কারণ সে / সে 100% প্রস্থের বাক্সগুলি চায় না।
— রেবতি শাহ
0

আপনি লেবেল ধারকটিতে প্রস্থ এবং শব্দ-বিরতি যুক্ত করার চেষ্টা করতে পারেন এবং সেই অনুসারে প্রস্থটি সামঞ্জস্য করতে পারেন 

#outer {
	display: flex;
}
#main {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 20px;
}
.section {
	background-color: #ddd;
	padding: 15px;
	
}
.label {
    width: 100px;
    height: 100px;
    overflow-y: auto;
    word-break: break-all;
    margin-bottom: 10px;
}

.label, .icon {
	text-align: center;
}
<div id="outer">
	<div id="main">
		<div class="section">
			<div class="label">Label 1AAAAAAAAAAA</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 1B</div>
		</div>
		<div class="section">
			<div class="label">Label 2A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 2B</div>
		</div>
		<div class="section">
			<div class="label">Label 3A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 3B</div>
		</div>
		<div class="section">
			<div class="label">Label 4A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 4B</div>
		</div>
		<div class="section">
			<div class="label">Label 5A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
	</div> 
</div>
স্নিপেট প্রসারিত করুন

— lost_in_magento
সূত্র
অর্ধেক শব্দ ভাঙা গ্রহণযোগ্য নয়। পরিবর্তে আমি অন্যান্য ডিভগুলি বৃহত ডিভের সমান আকার পেতে চাই gain
— kojow7
নিশ্চিত! আমরা এটি অর্জন করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারি?
— গেছে_ইন_মেজ্যান্টো
আমি খাঁটি সিএসএস পছন্দ করব, তবে সম্ভব না হলে জাভাস্ক্রিপ্ট (jQuery নয়) গ্রহণযোগ্য হবে।
— kojow7
এটি জাভাস্ক্রিপ্ট ছাড়াই সেরা উত্তর
— ডেভিড মাচাডো
0

যদি আমি আপনার সমস্যাটি সঠিকভাবে বুঝতে পারি তবে আপনি যে অদ্ভুত ফাঁকটি থেকে মুক্তি পেতে চান তা হ'ল দ্বিতীয় সারির প্রথমটি একবার আপনার প্রথম সারিতে আবদ্ধ হয়ে যায়। যদি ঠিক এ পর্যন্তই আপনি সমাধান বের করার চেষ্টা করছি, তাহলে সব আপনাকে যা করতে হবে পরিবর্তন justify-contentথেকে space-betweenথেকে flex-startএকটি মার্জিন সঙ্গে আপনার যোগ করা .sectionউপাদান এবং আপনার প্যাডিং #mainস্থায়ী মেলে। সমস্ত চিত্রের মধ্যে ব্যবধানটি এখন 20px হবে।

#outer {
	display: flex;
}
#main {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 10px;
}
.section {
	background-color: #ddd;
	padding: 15px;
	margin: 10px;
}

.label, .icon {
	text-align: center;
}
<div id="outer">
	<div id="main">
		<div class="section">
			<div class="label">Label 1AAAAAAAAAAA</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 1B</div>
		</div>
		<div class="section">
			<div class="label">Label 2A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 2B</div>
		</div>
		<div class="section">
			<div class="label">Label 3A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 3B</div>
		</div>
		<div class="section">
			<div class="label">Label 4A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 4B</div>
		</div>
		<div class="section">
			<div class="label">Label 5A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
	</div> 
</div>
স্নিপেট প্রসারিত করুন

আপনি কিভাবে যে কেমন লাগে, আপনি অন্যান্য চেষ্টা করতে পারেন পছন্দ না হয় justify-contentমান পছন্দ flex-start, flex-end, space-around, space-evenly।

বিকল্পভাবে, আপনি পরিত্রাণ পেতে justify-contentএবং এর চারপাশের ফিটের জন্য flex-growপ্রতিটি প্রসারিত করতে ব্যবহার করতে পারেন .section।

#outer {
  display: flex;
}
#main {
  display: flex;
  flex-wrap: wrap;
  border: solid black 25px;
  border-radius: 25px;
  width: 450px;
  height: 500px;
  padding: 10px;
}
.section {
  background-color: #ddd;
  padding: 15px;
  margin: 10px;
  flex-grow: 1;
}

.label, .icon {
  text-align: center;
}
<div id="outer">
  <div id="main">
    <div class="section">
      <div class="label">Label 1AAAAAAAAAAA</div>
      <div class="icon"><img src="https://via.placeholder.com/75"></div>
      <div class="label">Label 1B</div>
    </div>
    <div class="section">
      <div class="label">Label 2A</div>
      <div class="icon"><img src="https://via.placeholder.com/75"></div>
      <div class="label">Label 2B</div>
    </div>
    <div class="section">
      <div class="label">Label 3A</div>
      <div class="icon"><img src="https://via.placeholder.com/75"></div>
      <div class="label">Label 3B</div>
    </div>
    <div class="section">
      <div class="label">Label 4A</div>
      <div class="icon"><img src="https://via.placeholder.com/75"></div>
      <div class="label">Label 4B</div>
    </div>
    <div class="section">
      <div class="label">Label 5A</div>
      <div class="icon"><img src="https://via.placeholder.com/75"></div>
      <div class="label">Label 5B</div>
    </div>
  </div> 
</div>
স্নিপেট প্রসারিত করুন

বিকল্পভাবে, আপনি যদি প্রতিটি .sectionউপাদানগুলির সামগ্রীতে ফিট করার জন্য এখনও তাদের নর্দমার সারি বেঁধে রাখতে চান তবে আপনি ব্যবহার করে দেখতে পারেনdisplay: table পরিবর্তে এটি ।

এখানে অসুবিধে হ'ল আপনাকে এইচটিএমএলকে সারিগুলিতে বিভক্ত করতে হবে।

#outer {
  display: flex;
}
#main {
  display: table;
  flex-wrap: wrap;
  border: solid black 25px;
  border-radius: 25px;
  width: 450px;
  height: 500px;
  border-collapse: separate;
  border-spacing: 20px;
}
.row {
  display: table-row;
}
.section {
  display: table-cell;
  background-color: #ddd;
  padding: 15px;
}

.label, .icon {
  text-align: center;
}
<div id="outer">
  <div id="main">
    <div class="row">
      <div class="section">
        <div class="label">Label 1AAAAAAAAAAA</div>
        <div class="icon"><img src="https://via.placeholder.com/75"></div>
        <div class="label">Label 1B</div>
      </div>
      <div class="section">
        <div class="label">Label 2A</div>
        <div class="icon"><img src="https://via.placeholder.com/75"></div>
        <div class="label">Label 2B</div>
      </div>
      <div class="section">
        <div class="label">Label 3A</div>
        <div class="icon"><img src="https://via.placeholder.com/75"></div>
        <div class="label">Label 3B</div>
      </div>
    </div>
    <div class="row">
      <div class="section">
        <div class="label">Label 4A</div>
        <div class="icon"><img src="https://via.placeholder.com/75"></div>
        <div class="label">Label 4B</div>
      </div>
      <div class="section">
        <div class="label">Label 5A</div>
        <div class="icon"><img src="https://via.placeholder.com/75"></div>
        <div class="label">Label 5B</div>
      </div>
    </div>
  </div> 
</div>
স্নিপেট প্রসারিত করুন

আপনি যদি এর পরিবর্তে সত্যিই চান যে সমস্ত .sectionউপাদানগুলি বড় উপাদানগুলির সাথে সমান হতে প্রসারিত হয় .section,

আপনার সম্ভবত জাভাস্ক্রিপ্ট ব্যবহার করা প্রয়োজন যেহেতু সিএসএসে ভাইবোন উপাদানগুলি একে অপরের সম্পর্কে বেশি জানেন না।

আপনি আপনার পৃষ্ঠায় নিম্নলিখিত জাভাস্ক্রিপ্ট যুক্ত করতে এবং সিএসএসকে সামঞ্জস্য করতে পারেন:

function expandSectionsToLargest() {
  // Grab all of the elements with "section" class names
  var sectionElements = document.getElementsByClassName('section');

  // Find the largest width among our section elements
  var largestWidth = -Infinity;
  Array.prototype.forEach.call(sectionElements, section => {
    if (section.offsetWidth > largestWidth) {
      largestWidth = section.offsetWidth;
    }
  });

  // Set all of the sections to at least equal the largest width
  Array.prototype.forEach.call(sectionElements, section => {
    section.style.minWidth = largestWidth + 'px';
  });
}

// Expand the section widths now (must be called after the section elements are loaded)
expandSectionsToLargest();
#outer {
	display: block;
}
#main {
	display: block;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 10px;
}
.section {
	background-color: #ddd;
	box-sizing: border-box; /* Important to make the element's CSS width coincide with JavaScript's offsetWidth value */
	padding: 15px;
	margin: 10px;
	float: left;
}

.label, .icon {
	text-align: center;
}
<div id="outer">
	<div id="main">
		<div class="section">
			<div class="label">Label 1AAAAAAAAAAA</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 1B</div>
		</div>
		<div class="section">
			<div class="label">Label 2A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 2B</div>
		</div>
		<div class="section">
			<div class="label">Label 3A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 3B</div>
		</div>
		<div class="section">
			<div class="label">Label 4A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 4B</div>
		</div>
		<div class="section">
			<div class="label">Label 5A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
	</div> 
</div>
স্নিপেট প্রসারিত করুন

— jsea
সূত্র
হ্যাঁ, আমি সর্বশেষে যা খুঁজছি তা হ'ল। এটির সাথে একমাত্র সমস্যাটি হ'ল ডান দিকের মার্জিনটি খুব বড়। সমস্ত জিনিস এবং বাম / ডান মার্জিনের মধ্যে সমান-দূরত্বের ব্যবধান থাকলে এটি দুর্দান্ত হবে।
— kojow7
আপনি আমার উত্তর @ কোজো 7 -কে চেক করতে পারেন
— ডেভিড
0

আমি সিএসএস গ্রিডও পরামর্শ দেব।

আপনি 3 টি কলাম এবং 2 টি সারি নির্দিষ্ট করেছেন যা একে অপরের মধ্যে সমান প্রস্থ ভাগ করে নেয় এবং বিভাগগুলিকে ফাঁকে ফাঁকে ফাঁকে দেখানোর জন্য একটি ছোট মার্জিন রাখতে বলে:

.section {
      background-color: #ddd;
      padding: 15px;
      margin: 10px;
  }

  .label, .icon {
      text-align: center;
  }

  #main {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
  }
<div id="outer">
      <div id="main">
          <div class="section">
              <div class="label">Label 1AAAAAAAAAAA</div>
              <div class="icon"><img src="https://via.placeholder.com/75"></div>
              <div class="label">Label 1B</div>
          </div>
          <div class="section">
              <div class="label">Label 2A</div>
              <div class="icon"><img src="https://via.placeholder.com/75"></div>
              <div class="label">Label 2B</div>
          </div>
          <div class="section">
              <div class="label">Label 3A</div>
              <div class="icon"><img src="https://via.placeholder.com/75"></div>
              <div class="label">Label 3B</div>
          </div>
          <div class="section">
              <div class="label">Label 4A</div>
              <div class="icon"><img src="https://via.placeholder.com/75"></div>
              <div class="label">Label 4B</div>
          </div>
          <div class="section">
              <div class="label">Label 5A</div>
              <div class="icon"><img src="https://via.placeholder.com/75"></div>
              <div class="label">Label 5B</div>
          </div>
      </div>
  </div>
স্নিপেট প্রসারিত করুন

— কাই হার্টম্যান
সূত্র
যদিও সমস্যাটি হচ্ছে বিভাগগুলি গতিশীল, আপনি একটি সারিতে কম বা বেশি ফিট করতে পারবেন তাই এটি 3 টি কলামে সেট করা এবং 2 টি সারি কাজ করবে না।
— kojow7
0

এই সমস্ত মানদণ্ডের সাথে একটি খাঁটি সিএসএস সমাধান হ'ল, আমি মনে করি, অসম্ভব তবে সিএসএস গ্রিডের সাথে মিলিত একটি জেএস সমাধান সম্ভব।

একটি খাঁটি সিএসএস সমাধান যেখানে উপাদানটি পাঠ্যের সাথে গতিশীলভাবে মানিয়ে যায় এবং সেট করে যা অন্য সমস্ত উপাদানগুলিতে পরিবর্তিত হয় তা সম্ভব নয়। পাঠ্যের সাথে খাপ খাইয়ে দেওয়ার জন্য আমরা গতিশীলভাবে উপাদানটির প্রস্থ নির্ধারণ করতে পারি তবে আমরা সেই প্রস্থটিকে একই বর্গযুক্ত অন্যান্য উপাদানগুলির সর্বনিম্ন করতে পারি না।

let textClass = document.getElementsByClassName("text");
let texts = Array.from(textClass);

var widths = [];

texts.forEach(function(item){
  widths.push(item.offsetWidth)
});

let maxWidth = Math.max.apply(Math, widths) + 20; // change the 20 to adjust padding

let root = document.documentElement;
root.style.setProperty('--card-min-width', maxWidth + "px");
:root {
  --card-min-width: 0px;
}

#outer {
	min-width: 350px; /*this just needs a minimal value*/
	min-height: 200px; /*this just needs a minimal value*/
}

#main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
  grid-template-rows: auto;
  grid-gap: 0.5rem; /*padding between elements*/
	padding: 0.5rem; /*outer padding*/
  /*
  border: solid black 25px;
	border-radius: 25px;        <--- black border
  */
}

.section {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr 1fr 1fr;
	background-color: #ddd;
	padding: 5px;
  margin: 5px;
  min-width: 80px;
  vertical-align: center;
}

.label, .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  text-align: center;
}
<div id="outer">
	<div id="main">
		<div class="section">
			<div class="label">
        <p class="text">
          Label 1AAAAAAAAAAAdsadasdasd
        </p>
      </div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">
        <p class="text">
          Label 1B
        </p>
      </div>
		</div>
		<div class="section">
			<div id="x" class="label">
        <p class="text">
          Label 2A
        </p>
      </div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">
        <p class="text">
          Label 2B
        </p>
      </div>
		</div>
		<div class="section">
			<div class="label">
        <p class="text">
          Label 3A
        </p>
      </div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">
        <p class="text">
          Label 3B
        </p>
      </div>
		</div>
		<div class="section">
			<div class="label">
        <p class="text">
          Label 4A
        </p>
      </div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">
        <p class="text">
          Label 4B
        </p>
      </div>
		</div>
		<div class="section">
			<div class="label">
        <p class="text">
          Label 5A
        </p>
      </div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">
        <p class="text">
          Label 5B
        </p>
      </div>
		</div>
	</div> 
</div>
স্নিপেট প্রসারিত করুন

— ডেভিড মাচাডো
সূত্র
এই উত্তরের জন্য ধন্যবাদ। এটি আমার যা প্রয়োজন তার চেয়ে এখন পর্যন্ত এটি সবচেয়ে কাছাকাছি বলে মনে হচ্ছে (ধরে নিচ্ছি যে কোনও খাঁটি CSS সমাধান নেই)। এছাড়াও, আমি বুঝতে পারি নি যে কাস্টম সম্পত্তি / সিএসএস ভেরিয়েবলগুলি আসলে বিদ্যমান। এটি সঠিকভাবে কাজ করার জন্য কি তাদের প্রয়োজনীয়, বা আপনি কেবল তাদের সুবিধার্থে ব্যবহার করেছেন?
— kojow7
@ কোজো I আমি তাদের ব্যবহার করতে পছন্দ করি কারণ তারা কোডটি আরও অর্থবহ করে এবং তারা গ্লোভের মতো এই বিশেষ ক্ষেত্রে ফিট করে
— ডেভিড
আরে, পিতামাতাকে পূরণ করার জন্য ডিভগুলি প্রসারিত না করেই এই কাজ করার চেষ্টা করছেন। কোন পরামর্শ? প্রতিটি চিত্র অনুভূমিকভাবে এবং উলম্বভাবে একে অপরের চিত্রের সাথে একত্রিত হওয়া উচিত। অনুভূমিক ব্যবধানটি সারিগুলির মধ্যে পরিবর্তিত হতে পারে তবে কলামগুলির মধ্যে ব্যবধান প্রতিটি সারি জুড়ে একই হওয়া উচিত।
— kojow7
1
@ কোজো 7, কেবল কোনও অভ্যন্তরে গ্রিড তৈরি করুন এবং প্যাডিংগুলি, divসীমানাগুলি দিন। এবং min-widthএবং min-heightপ্রধান div।
— এলচিনি নেট
@ কোজো El এলিকিনি নেট ঠিক যা বলেছেন তা কেবলমাত্র সিএসএস এবং জেএসকে পছন্দসই আউটপুট পেতে আপডেট করেছে।
— ডেভিড
0

এই হল: 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
    <style>
        .firstone {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            word-wrap: break-word;
            justify-content: space-evenly;
        }

        .secondone {
            word-wrap: break-word;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
    </style>
</head>

<body>

    <div class="firstone">
        <div>
            <div>Label 1AAAAAAAAAAA</div>
            <div><img src="https://via.placeholder.com/75"></div>
            <div>Label 1B</div>
        </div>
        <div>
            <div>Label 2A</div>
            <div><img src="https://via.placeholder.com/75"></div>
            <div>Label 2B</div>
        </div>
    </div>
    <div class="secondone">
        <div>
            <div>Label 3A</div>
            <div><img src="https://via.placeholder.com/75"></div>
            <div>Label 3B</div>
        </div>
        <div>
            <div>Label 4A</div>
            <div><img src="https://via.placeholder.com/75"></div>
            <div>Label 4B</div>
        </div>
        <div>
            <div>Label 5A</div>
            <div><img src=" https://via.placeholder.com/75"> </div>
            <div>Label 5B</div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

পরীক্ষা https://jsfiddle.net/sugandhnikhil/b216mx5d/

চিত্রের মধ্যে ইক্কুয়াল স্যাপেসিং দেখতে উইন্ডোটির আকার পরিবর্তন করুন !!!!

অসংখ্য ধন্যবাদ!!!!!!!

:-)

— নিখিল সুগন্ধ
সূত্র
0

শুধু ভাবছি কেন পাঠ্যের দৈর্ঘ্যটি আকারের সংজ্ঞা দেয় div? এটি কি ইউআইকে অদ্ভুত করে তুলবে না? আমি লেবেলের প্রস্থ এবং সমস্ত পাঠ্য ওভারফ্লো হয়ে যাওয়ার পরামর্শ দিচ্ছি ellipsis (...)। এটির সাথে JavaScriptকোডগুলির দরকার নেই , cssআপনার জন্য কিছু অতিরিক্ত .label। এখানে একটি স্নিপেট। এটি divযখনই কোনও দীর্ঘ পাঠ্য হবে তখনই আপনার আকারগুলি পরিবর্তন করার চেয়ে এটি আরও ভাল দেখাচ্ছে । 

#outer {
	display: block;
}
#main {
	display: block;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 10px;
}
.section {
	background-color: #ddd;
	box-sizing: border-box; /* Important to make the element's CSS width coincide with JavaScript's offsetWidth value */
	padding: 15px;
	margin: 10px;
	float: left;
}

.label, .icon {
	text-align: center;
}

.label{
  width: 100px;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="outer">
	<div id="main">
		<div class="section">
			<div class="label">Label 1AAAAAAAAAAA</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 1B</div>
		</div>
		<div class="section">
			<div class="label">Label 2ASDEASD</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 2B</div>
		</div>
		<div class="section">
			<div class="label">Label 3AGDSADASD</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 3B</div>
		</div>
		<div class="section">
			<div class="label">Label 4A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 4B</div>
		</div>
		<div class="section">
			<div class="label">Label 5ASDSAD</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
    <div class="section">
			<div class="label">Label 6BABAF</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
    <div class="section">
			<div class="label">Label 5XAEAFSASFD</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
    <div class="section">
			<div class="label">Label 5AASDASEFSAFGG</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
    <div class="section">
			<div class="label">Label 5ASDASEEGEDSDSD</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
	</div> 
</div>
</body>
</html>
স্নিপেট প্রসারিত করুন

আপনি যদি উদ্বিগ্ন হন তবে "আমার দর্শকরা কীভাবে বাকী লেখাটি পড়তে পারেন?" তারপরে আপনি কেবল এই কোডপেন নমুনার (নমুনাটি আমার নয়) এর মতো কিছু প্রভাব ফেলতে on hoverপারেন বা এই জাতীয় সমাধানের মতো কিছু চেষ্টা করতে পারেন ।ellipsis

আশাকরি এটা সাহায্য করবে!

— tomjosef
সূত্র
0

অন্যান্য উত্তরগুলি যা বোঝায় এটির থেকে এটি কিছুটা আলাদা কোণ। আপনি সম্ভাব্যভাবে কাটা পাঠ্যের স্থিতি বিবেচনা করতে পারেন।

#outer {
	display: flex;
}
#main {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 20px;
}
.section {
	background-color: #ddd;
	padding: 15px;
    width: 100px; // I had to come up with a number here
    min-width: 0; 
}

.label, .icon {
	text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; // truncate the excess string here
}
<div id="outer">
	<div id="main">
		<div class="section">
			<div class="label">Label 1AAAAAAAAAAA</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 1B</div>
		</div>
		<div class="section">
			<div class="label">Label 2A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 2B</div>
		</div>
		<div class="section">
			<div class="label">Label 3A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 3B</div>
		</div>
		<div class="section">
			<div class="label">Label 4A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 4B</div>
		</div>
		<div class="section">
			<div class="label">Label 5A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
	</div> 
</div>
স্নিপেট প্রসারিত করুন

— তৈমুর
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.