Question

我正在尝试根据浏览器大小的变化制作图像网格。

如何使用列表完成此操作？

理想情况下，我想让它们保持均匀分布的行。所以，比如大小得到这样，顶部有三行，底部有三行中的一行 - 如果三行中的一行可以居中，那么最好，因此右下角没有“缺少方块”。

现在它的设置方式有效 - 适用于移动设备。但我想让它适用于任何台式机或平板电脑。

.main{
	width:22.5rem;
	margin: 0 auto;
	position: relative;

}

.interest {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

.interest li {
	float: left;
	margin: 5px;
	width: 5.375rem;
	height: 6.5rem;
	line-height: 70%;
}

.interest img {
	width: 5.375rem;
	height: 5.375rem;
}

.interest a {
	margin: 0 auto;
	width: 5.375rem;
	height: 1rem;
	font-size: .75rem;

}

.interest a:hover{
	color: lightyellow;
}

<div class="main">

<div class="interest">

<ul>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing thing</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">Crime/<br>thing</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thingL.svg">Gun thing</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing/Safety</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing Rel</a></li>
	<li><a href="#/thing"><img class="portal" src="img/Jthing.svg">Jobs/Economy</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">Quality of thing</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">Reproduction</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing</a></li>
	<li><a href="#/thing"><img class="portal" src="img/thing.svg">thing Services</a></li>
</ul>

</div>
			
</div>

Answer 1

所以，我使用像@Raphael Disanto这样的弹性框来解决这个问题。

到目前为止，该代码适用于根据窗口大小的变化重新组织图像。仍然需要添加特定的图像缩放，这样图像不仅可以改变相对于屏幕尺寸的位置，还可以改变尺寸。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {

  padding: 0px;
  width: 130px;
  height: 150px;
  margin-top: 10px;
  
  line-height: 10px;
  color: white;

}

.flex-item img {
    -webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	width: 70%;

}

.flex-item p {

}

.flex-item a {
  font-weight: bold;
  line-height: 15px;
  font-size: 1em;
  text-align: center;
  	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
/*  line-height: 100px;
*/}

.flex-item a:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	transform: scale(1.05);
}

<div>
<div class="flex-container">
<div class="flex-item">
	<a href="#/civilLiberties"><img src="img/CIVIL_LIBERTIES.svg"></br>Civil Liberties</a>
</div>
<div class="flex-item">
	<a href="#/crimeAndPunishment"><img src="img/CRIME_AND_PUNISHMENT.svg"></br>Crime/<br>Punishment</a>
</div>
<div class="flex-item">
	<a href="#/education"><img src="img/EDUCATION.svg"></br>Education</a>
</div>
<div class="flex-item">
	<a href="#/energy"><img src="img/ENERGY.svg"></br>Energy</a>
</div>
<div class="flex-item">
	<a href="#/environment"><img src="img/ENVIRONMENT.svg"></br>Environment</a>
</div>
<div class="flex-item">
	<a href="#/gunControl"><img src="img/GUN-CONTROL.svg"></br>Gun Control</a>
</div>
<div class="flex-item">
	<a href="#/healthSafety"><img src="img/HEALTH-SAFETY.svg"></br>Health/Safety</a>
</div>
<div class="flex-item">
	<a href="#/immigration"><img src="img/IMMIGRATION.svg"></br>Immigration</a>
</div>
<div class="flex-item">
	<a href="#/infrastructure"><img src="img/INFRASTRUCTURE.svg"></br>Infrastructure</a>
</div>
<div class="flex-item">
	<a href="#/internationalRelations"><img src="img/INTERNATIONAL-REL.svg"></br>International Rel</a>
</div>
<div class="flex-item">
	<a href="#/jobsEconomy"><img src="img/JOBS-ECONOMY.svg"></br>Jobs/Economy</a>
</div>
<div class="flex-item">
	<a href="#/qualityOfLife"><img src="img/QUALITY-OF-LIFE.svg"></br>Quality of Life</a>
</div>
<div class="flex-item">
	<a href="#/reproduction"><img src="img/REPRODUCTION.svg"></br>Reproduction</a>
</div>
<div class="flex-item">
	<a href="#/taxes"><img src="img/TAXES.svg"></br>Taxes</a>
</div>
<div class="flex-item">
	<a href="#/socialServices"><img src="img/Social-Services.svg"></br>Social Services</a>
</div>
</div>
</div>

通过<ul> <li> </li> </ul>

1 个答案: