रैप-अराउंड के साथ समान आकार के divs बनाना

17

मैं ऊपर और नीचे एक छवि और पाठ के साथ एक मेनू प्रणाली बनाने की कोशिश कर रहा हूं। डेटा गतिशील है। मैं मेनू सिस्टम को प्रदर्शित करना चाहता हूं ताकि प्रत्येक छवि एक-दूसरे की छवि से समान दूरी पर हो ताकि वे क्षैतिज और लंबवत रूप से छवियों के ग्रिड में पंक्तिबद्ध हों।

समस्या पाठ है। यदि पाठ छवि से अधिक लंबा है, तो div बड़ा हो जाता है। हालाँकि, तब यह एक अजीब लगने वाला अंतर पैदा करता है क्योंकि चित्र अब एक दूसरे के साथ समान रूप से नहीं रह गए हैं।

इसके आस-पास काम करने के लिए मुझे लगता है कि सबसे अच्छा तरीका यह होगा कि प्रत्येक अन्य divs के पास बड़ा div का आकार अपनाने के लिए होगा। हालांकि, मुझे यकीन नहीं है कि ऐसा करने के बारे में कैसे जाना जाए।

मैंने 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;
— Artur Noetzel
आप वर्तमान # मुख्य चौड़ाई 450px है। यदि आपके अनुभाग के लिए आपकी गतिशील सामग्री है, उदाहरण के लिए; 350px, क्या वे सभी एक नई पंक्ति नहीं बनाएंगे? क्या तुम यही चाहते हो?
— गोसी
@ गोसी, हां, यही तो मैं चाहूंगा।
— kojow7
आप बूटस्ट्रैप 4 वर्गों का उपयोग कर सकते हैं। क्या आप ने कोशिश की?
— रेवती शाह

जवाबों:

6

सुनिश्चित नहीं है कि आप इसे बना सकते हैं ताकि हर तत्व सबसे बड़े तत्व जितना बड़ा हो जाए, लेकिन अगर आप यह मान सकते हैं कि आप हर पंक्ति में एक विशिष्ट संख्या चाहते हैं, तो बस उन्हें समान आकार दें। मुझे लगता है कि फ्लेक्सबॉक्स के बजाय सीएसएस ग्रिड के साथ यह बहुत आसान है। समाधान नीचे देखें। मैं ग्रिड तत्वों का उपयोग अनुभाग तत्वों की स्थिति के साथ-साथ यह सुनिश्चित करने के लिए करता हूं कि प्रत्येक अनुभाग के अंदर सभी तीन भागों (शीर्ष पाठ, छवि, निचला पाठ) प्रत्येक div का 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>
स्निपेट का विस्तार करें

— जकुब रुसिलको
स्रोत
यह काम नहीं करेगा क्योंकि तत्व आकार में तय किए गए हैं। उदाहरण, यदि मैंने लेबल 1AAAAAAAAAAAAAAAAAAAAAAAAA डाला है, तो तत्व पाठ को फिट करने के लिए आकार नहीं दे रहा है।
— kojow7
अरे, यह काम करेगा। मैं उसके कोड में अपडेट करूंगा। कृपया यह जाँचें।
— रेवती शाह
@ kojow7 आप लेबल में लंबा नाम रख सकते हैं। आशा है कि हम आपके awser को पूरा करेंगे।
— रेवती शाह
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>
— फहीम खान
स्रोत
केवल स्निपेट कोड देखें, नीचे दिए गए स्निपेट को अपडेट नहीं किया गया है
— फहीम खान
@ kojow7 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
स्रोत
शब्द को आधे में तोड़ना स्वीकार्य नहीं है। इसके बजाय मैं चाहता हूं कि दूसरे डिवीजन भी बड़े डिव के बराबर आकार हासिल करें।
— kojow7
ज़रूर! क्या हम इसे प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं?
— खो_in_magento
मैं शुद्ध CSS पसंद करूंगा, लेकिन यदि संभव नहीं है, तो जावास्क्रिप्ट (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इसके बजाय उपयोग करने का प्रयास कर सकते हैं ।

यहाँ नुकसान आपको HTML को पंक्तियों में विभाजित करने की आवश्यकता है।

#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
क्या आप मेरे उत्तर को देख सकते हैं @ kojow7
— डेविड मचाडो
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

उन सभी मानदंडों के साथ एक शुद्ध सीएसएस समाधान है, मुझे लगता है, असंभव लेकिन सीएसएस ग्रिड के साथ संयुक्त एक जेएस समाधान संभव है।

एक शुद्ध सीएसएस समाधान जहां तत्व गतिशील रूप से पाठ के लिए adapts और सेट करता है कि अन्य सभी तत्वों में परिवर्तन संभव नहीं है। हम पाठ को अनुकूलित करने के लिए तत्व की चौड़ाई को गतिशील रूप से सेट कर सकते हैं लेकिन हम उस चौड़ाई को अन्य सभी तत्वों के लिए न्यूनतम नहीं बना सकते हैं जिनके पास एक ही वर्ग है।

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>
स्निपेट का विस्तार करें

— डेविड मचाडो
स्रोत
इस उत्तर के लिए धन्यवाद। ऐसा लगता है कि अब तक मुझे जो चाहिए वह निकटतम है (कोई शुद्ध सीएसएस समाधान नहीं है)। इसके अलावा, मुझे एहसास नहीं था कि कस्टम गुण / सीएसएस चर वास्तव में मौजूद थे। क्या वे ठीक से काम करने के लिए इसके लिए आवश्यक हैं, या क्या आपने उन्हें सुविधा के लिए उपयोग किया है?
— kojow7
@ kojow7 मुझे उनका उपयोग करना पसंद है क्योंकि वे कोड को अधिक अर्थपूर्ण बनाते हैं और वे इस विशेष मामले को एक दस्ताने की तरह फिट करते हैं
— डेविड मचाडो
अरे, माता-पिता को भरने के लिए ऊंचाई में खिंचाव के बिना इस काम को पाने की कोशिश कर रहा है। कोई सुझाव? प्रत्येक छवि को अभी भी क्षैतिज और लंबवत रूप से एक दूसरे की छवि के साथ संरेखित किया जाना चाहिए। पंक्तियों के बीच क्षैतिज रिक्ति बदल सकती है, लेकिन स्तंभों के बीच रिक्ति हर पंक्ति में समान होनी चाहिए।
— kojow7
1
@ kojow7, बस इनर में ग्रिड बनाएं और पैडिंग्स, divबॉर्डर दें। और min-widthऔर min-heightमुख्य में div।
— ElhhiniNet
@ kojow7 ने बताया कि ElChiniNet ने वांछित आउटपुट के लिए सिर्फ css और js को अपडेट किया है।
— डेविड मचाडो
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>

check https://jsfiddle.net/sugandhnikhil/b216mx5d/

छवि के बीच eqqual sapcing देखने के लिए खिड़की का आकार बदलें !!!!

अनेक अनेक धन्यवाद!!!!!!!

:-)

— निखिल सुंगंध
स्रोत
0

बस सोच रहा था कि पाठ की लंबाई के आकार को क्यों परिभाषित करें div? कि UI अजीब नहीं होगा? मैं सुझाव दूंगा कि लेबल के लिए चौड़ाई और सभी पाठ अतिप्रवाह बनने के लिए 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इस codepen तरह नमूना इस एसओ की तरह कुछ (मेरा नहीं नमूना) या हो सकता है की कोशिश समाधान ।

उम्मीद है की यह मदद करेगा!

— 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>
स्निपेट का विस्तार करें

— तैमूर
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.