使用环绕式创建相同大小的div

时间：2019-11-18 04:59:55

标签： html css flexbox

我正在尝试创建一个菜单系统，其中的图像和文字在上方和下方。数据是动态的。我希望菜单系统出现，以使每个图像彼此之间的距离相等，以便它们在水平和垂直图像网格中对齐。

问题是文本。如果文本比图像长，则div会放大。但是，由于图像不再彼此等距分布，因此会产生尴尬的外观间隙。

要解决此问题，我认为最好的方法是让其他每个div都采用较大div的大小。但是，我不确定该怎么做。

我已经尝试过使用flex-wrap属性的flexbox。虽然效果很好，但我一直无法找到一种方法来使每个图像彼此等距对齐。

如何实现这一目标？

我的代码如下：

#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会增加其高度。因此，对此有任何见识也将受到赞赏。

10 个答案:

答案 0 :(得分：6)

不确定是否可以使每个元素都变得与最大元素一样大，但是如果可以假设您希望每行中都有特定数量的元素，则只需将它们的大小相等即可。 我认为使用CSS网格而不是flexbox可以轻松得多。请参阅下面的解决方案。我使用网格放置 section 元素，并确保在每个 section 中，所有三个部分（顶部文本，图像，底部文本）正好占据1/3的位置每个div-这是为了确保所有图像也垂直对齐。 另外，我在 labels 中使用flex来确保文本在中间（水平和垂直）。

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

答案 1 :(得分：3)

快速旋转密码。缺少的一件事是媒体查询，当它不能容纳一行3列时该如何表现，我只需要将max-width属性更改为50% - individual item padding left and right - how much space you want between并将flex: 1 33%更改为flex: 1 55%

（如果您更改框大小的工作方式，以使宽度包括宽度的填充，请使用this之类的框大小属性，则可以跳过填充值）

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;

}

答案 2 :(得分：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>

答案 3 :(得分：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>

答案 4 :(得分：0)

我认为不可能有一个具有所有这些标准的纯CSS解决方案，但结合CSS Grid的JS解决方案是可能的。

纯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>

答案 5 :(得分：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元素相等，

您很可能需要使用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>

答案 6 :(得分：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>

答案 7 :(得分：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/

调整窗口大小以查看图像之间的等距间距！！！！

非常感谢！!!!!!!

：-）

答案 8 :(得分：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上，例如此代码笔sample（不是我的样本），或者尝试使用类似的方法solution。

希望这会有所帮助！

答案 9 :(得分：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>

相关问题
最新问题