สร้าง divs ที่มีขนาดเท่ากันโดยล้อมรอบ

17

ฉันกำลังพยายามสร้างระบบเมนูที่มีรูปภาพและข้อความด้านบนและด้านล่าง ข้อมูลเป็นแบบไดนามิก ฉันต้องการให้ระบบเมนูปรากฏขึ้นเพื่อให้แต่ละภาพมีระยะทางเท่ากันจากภาพอื่น ๆ เพื่อให้พวกเขาเข้าแถวในตารางภาพทั้งแนวนอนและแนวตั้ง

ปัญหาคือข้อความ หากข้อความยาวเกินกว่าที่รูปภาพแสดง div จะขยายใหญ่ขึ้น อย่างไรก็ตามมันจะสร้างช่องว่างที่ดูแปลก ๆ เนื่องจากรูปภาพไม่ได้เว้นระยะเท่ากัน

ในการหลีกเลี่ยงปัญหานี้ฉันคิดว่าวิธีที่ดีที่สุดคือการให้กองหน้าที่อื่น ๆ ใช้ขนาดของแผนกที่ใหญ่ขึ้น อย่างไรก็ตามฉันไม่แน่ใจว่าจะทำสิ่งนี้อย่างไร

ฉันลองด้วย flexbox โดยใช้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>
ขยายตัวอย่างข้อมูล

PS ฉันก็ไม่แน่ใจเหมือนกันว่าทำไม div ส่วนของฉันจึงเพิ่มความสูง ดังนั้นความเข้าใจใด ๆ เกี่ยวกับเรื่องนี้ก็จะได้รับการชื่นชม

html  css  flexbox 
— kojow7
แหล่งที่มา
2
ฉันคิดว่ากริดเป็นสิ่งที่คุณกำลังมองหา
— Siraj Alam
1
เหตุผลที่รายการได้รับความสูงที่เพิ่มขึ้นalign-itemsคือการตั้งstretchค่าเป็น คุณสามารถเปลี่ยนได้อย่างง่ายดาย:align-items: flex-start;
— Artur Noetzel
ปัจจุบันคุณ#main width คือ 450px หากเนื้อหาแบบไดนามิกสำหรับส่วนของคุณคือเช่น; 350px พวกเขาจะไม่ก่อแถวใหม่หรือไม่ นั่นคือสิ่งที่คุณต้องการ?
— Gosi
@Gosi ใช่นั่นคือสิ่งที่ฉันต้องการ
— kojow7
คุณสามารถใช้ bootstrap 4 คลาส คุณลอง?
— Revti Shah

คำตอบ:

6

ไม่แน่ใจว่าคุณสามารถสร้างมันได้หรือไม่เพื่อให้ทุก ๆ องค์ประกอบมีขนาดใหญ่เท่ากับองค์ประกอบที่ใหญ่ที่สุด แต่ถ้าคุณคิดว่าคุณต้องการจำนวนองค์ประกอบที่เฉพาะเจาะจงในทุกแถวให้ทำขนาดเท่ากัน ฉันคิดว่ามันทำได้ง่ายกว่าด้วย css grid แทนที่จะเป็น flexbox ดูวิธีแก้ปัญหาด้านล่าง ฉันใช้กริดเพื่อจัดวางองค์ประกอบของส่วนรวมทั้งเพื่อให้แน่ใจว่าภายในแต่ละส่วนทั้งสามส่วน (ข้อความบนสุด, ภาพ, ข้อความด้านล่าง) ใช้เวลา 1/3 ของ div แต่ละอัน - นี่คือเพื่อให้แน่ใจว่าภาพทั้งหมดจัดเรียงในแนวตั้ง . นอกจากนี้ฉันใช้ดิ้นในฉลากเพื่อให้แน่ใจว่าข้อความอยู่ตรงกลาง (แนวนอนและแนวตั้ง)

#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>
ขยายตัวอย่างข้อมูล

— Jakub Rusilko
แหล่งที่มา
สิ่งนี้จะไม่ทำงานเนื่องจากองค์ประกอบได้รับการแก้ไขในขนาด ตัวอย่างถ้าฉันใส่ Label 1AAAAAAAAAAAAAAAAAAAAA องค์ประกอบจะไม่ปรับขนาดให้พอดีกับข้อความ
— kojow7
เฮ้มันจะทำงาน ฉันจะอัปเดตในรหัสของเขา กรุณาตรวจสอบ
— Revti Shah
@ kojow7 คุณสามารถใส่ชื่อยาวในฉลาก หวังว่าเราจะตอบสนองผู้ตอบของคุณ
— Revti Shah
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>

CSS :

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

}
— ไมค์เอ็น
แหล่งที่มา
ฉันคิดว่าฉันต้องการสิ่งนี้เพื่อให้พอดีกับองค์ประกอบมากที่สุดในแถวที่เป็นไปได้ นี่อาจไม่ใช่เรื่องง่ายที่จะทำกับแบบสอบถามสื่อเพราะคุณจะต้องทำมันสำหรับทุกขนาดของหน้าจอที่เป็นไปได้กับทุกขนาดที่เป็นไปได้ของ div
— kojow7
3

ฉันหวังว่านี่จะช่วยได้

CSS

#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;
}

HTML

<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>
— Fahim Khan
แหล่งที่มา
ดูเฉพาะรหัสตัวอย่างข้อมูลโค้ดด้านล่างไม่ได้รับการอัปเดต
— Fahim Khan
@ kojow7 คุณเห็นคำตอบของฉัน?
— Fahim Khan
@Revti Shah หากฉลากกล่องที่สองมีชื่อยาวมันจะมีลักษณะเหมือนกล่องแรก
— Fahim Khan
ให้ถามเขาเกี่ยวกับภาพที่ชัดเจนว่าเธอต้องการอะไร เพราะเธอ / เขาไม่ต้องการความกว้างของกล่อง 100%
— Revti Shah
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
แหล่งที่มา
การแบ่งคำออกเป็นสองส่วนไม่เป็นที่ยอมรับ แต่ฉันต้องการให้ div อื่น ๆ มีขนาดเท่ากันกับ div ที่ใหญ่กว่า
— kojow7
แน่นอน! เราสามารถใช้จาวาสคริปต์เพื่อให้บรรลุสิ่งนี้ได้หรือไม่
— lost_in_magento
ฉันต้องการ CSS บริสุทธิ์ แต่ถ้าเป็นไปไม่ได้ JavaScript (ไม่ใช่ jQuery) จะยอมรับได้
— kojow7
นี่คือคำตอบที่ดีที่สุดโดยไม่มี javascript
— David Machado
0

หากฉันเข้าใจปัญหาของคุณอย่างถูกต้องช่องว่างแปลก ๆ ที่คุณต้องการกำจัดก็คือช่องว่างในแถวที่สองเมื่อแถวแรกของคุณล้อมรอบ หากนั่นคือทั้งหมดที่คุณพยายามที่จะแก้ไขบางทีสิ่งที่คุณต้องทำคือเปลี่ยนjustify-contentจากspace-betweenเป็นflex-startด้วยการเพิ่มระยะขอบให้กับ.sectionองค์ประกอบของคุณและ padding ในการ#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-aroundspace-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องค์ประกอบที่ใหญ่ที่สุด

คุณมักจะต้องใช้ JavaScript เนื่องจากองค์ประกอบพี่น้องใน CSS ไม่รู้จักกันมากนัก

คุณสามารถเพิ่ม JavaScript ต่อไปนี้ในหน้าของคุณและปรับ CSS ดังกล่าว:

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
— David Machado
0

ฉันจะแนะนำ CSS Grid ด้วย

คุณระบุ 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>
ขยายตัวอย่างข้อมูล

— ไก่ Hartmann
แหล่งที่มา
แม้ว่าปัญหาคือส่วนต่างๆเป็นแบบไดนามิกคุณอาจสามารถใส่ได้น้อยลงหรือน้อยลงในหนึ่งแถวดังนั้นการตั้งค่าเป็น 3 คอลัมน์และ 2 แถวจะไม่ทำงาน
— kojow7
0

ฉันคิดว่าเป็นวิธีการแก้ปัญหา CSS บริสุทธิ์ที่มีเกณฑ์ทั้งหมดนั้นเป็นไปไม่ได้ แต่โซลูชัน JS รวมกับ CSS Grid เป็นไปได้

โซลูชัน CSS ล้วนที่องค์ประกอบปรับแบบไดนามิกกับข้อความและชุดที่เปลี่ยนเป็นองค์ประกอบอื่น ๆ เป็นไปไม่ได้ เราสามารถตั้งค่าความกว้างขององค์ประกอบแบบไดนามิกเพื่อปรับให้เข้ากับข้อความ แต่เราไม่สามารถทำให้ความกว้างนั้นน้อยที่สุดสำหรับองค์ประกอบอื่น ๆ ที่มีคลาสเดียวกัน

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>
ขยายตัวอย่างข้อมูล

— David Machado
แหล่งที่มา
ขอบคุณสำหรับคำตอบนี้ ดูเหมือนว่าจะใกล้เคียงกับสิ่งที่ฉันต้องการ (สมมติว่าไม่มีวิธีแก้ปัญหา CSS บริสุทธิ์) นอกจากนี้ฉันไม่ได้ตระหนักว่ามีตัวแปร Custom Properties / CSS อยู่จริง พวกเขาจำเป็นสำหรับการทำงานอย่างถูกต้องหรือคุณเพียงแค่ใช้พวกเขาเพื่อความสะดวก?
— kojow7
@ kojow7 ฉันชอบที่จะใช้พวกเขาเพราะพวกเขาทำให้รหัสมีความหมายเต็มมากขึ้นและพวกเขาพอดีกับกรณีนี้โดยเฉพาะอย่างยิ่งเช่นถุงมือ
— David Machado
สวัสดีพยายามทำงานนี้โดยไม่ต้องให้ div สูงเท่านี้เพื่อเติมเต็มผู้ปกครอง ข้อเสนอแนะใด ๆ ภาพแต่ละภาพควรจัดแนวให้สอดคล้องกับภาพอื่น ๆ ทั้งแนวนอนและแนวตั้ง ระยะห่างแนวนอนอาจเปลี่ยนแปลงระหว่างแถว แต่ระยะห่างระหว่างคอลัมน์ควรเท่ากันในทุกแถว
— kojow7
1
@ kojow7 เพียงแค่สร้างกริดในด้านในdivและปล่อยให้ช่องว่างภายในเป็นเส้นขอบ และmin-widthและในหลักmin-height div
— ElChiniNet
@ kojow7 สิ่งที่ ElChiniNet กล่าวว่าเพิ่งปรับปรุง css และ js เพื่อให้ได้ผลลัพธ์ที่ต้องการ
— David Machado
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/

ปรับขนาดหน้าต่างเพื่อดู eqqual sapcing ระหว่างภาพ !!!!

ขอบคุณตัน !!!!!!!

:-)

— นิกกิล sugandh
แหล่งที่มา
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 นี้ของคุณ(ตัวอย่างไม่ใช่ของฉัน) หรืออาจลองวิธีแก้ปัญหา SO นี้

หวังว่านี่จะช่วยได้!

— tomjosef
แหล่งที่มา
0

นี่คือมุมที่แตกต่างกันเล็กน้อยกับคำตอบอื่น ๆ ที่แนะนำ คุณอาจพิจารณาตัดทอนข้อความ istead

#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>
ขยายตัวอย่างข้อมูล

— timur
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.