如何使多个div列调整为内容大小并适合父级？

Question

我需要自定义data grid，divs由rows和cells组成，而不是table组件。

我需要此网格中的每个列根据其内容调整其大小。同时我需要使所有列都适合父组件，以便列之前或之后没有空格。

我可以使用CSS来实现这一目标。否Javascript。

如何使多个div列调整内容大小并使用CSS适合父级？

Answer 1

这是一个使用flexbox的例子，只有父div作为flex-container，子div显示为表格单元格：

* {
  box-sizing: border-box;
  font-size: 16px;
  font-family: arial, sans-serif;
  color: #333;
}

.flex-container {
  background-color: #EFEFEF;
  padding: 10px;
  border: 2px solid #333;
  max-width: 500px;
  max-height: 500px;
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap; 
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-item {
	color: #fff;
	font-size: 1em;
	width:30%;
	margin:1%;
	padding:5px;
}

.flex-item-01 {
	background-color: #A65E5C;
}

.flex-item-02 {
	background-color: #9BCAA0;
}

.flex-item-03 {
	background-color: #37ABA7;
}

.flex-item-04 {
	background-color: #1A9FEC;
}

.flex-item-05 {
	background-color: #EA0FBC;
}

.flex-item-06 {
	background-color: #6A9F00;
}

.flex-item strong {
	display: block;
}	

		<div class="flex-container">
			
			<div class="flex-item flex-item-01">
				<em>Flex Item</em>
				<strong>01</strong> 
			</div>
				
			<div class="flex-item flex-item-02">
				<em>Flex Item</em>
				<strong>02</strong>
			</div>
				
			<div class="flex-item flex-item-03">
				<em>Flex Item</em>
				<strong>03</strong>
			</div>

			<div class="flex-item flex-item-04">
				<em>Flex Item</em>
				<strong>04</strong> 
			</div>
				
			<div class="flex-item flex-item-05">
				<em>Flex Item</em>
				<strong>05</strong>
			</div>
				
			<div class="flex-item flex-item-06">
				<em>Flex Item</em>
				<strong>06</strong>
			</div>
			
		</div>

希望这有帮助！

Answer 2

您可以使用display进行简单的操作：inline-block和vertical-align：top to childrens

.parent {

}
.parent div {
  width: 25%;
  margin-right:-4px;
  display:inline-block;
  vertical-align:top;
}

<div class="parent">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
  <div>
    <h1>This is a taller div.</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</div>