基本上,我试图使所有蓝色框的宽度和高度相同,而不管其中的内容如何。任何帮助是极大的赞赏。
.icon-tiles {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.tile-node {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1 33.33333%;
flex: 1 33.33333%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 2rem;
}
.tile-node__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tile-node__link {
background-color: #4d8acc;
padding: 2rem;
flex: 1 1 0;
}
<ul class="icon-tiles">
<li class="tile-node">
<a href="#" class="tile-node__link">
<div class="tile-node__content tile-node__content--calendar">
<span class="tile-node__text">My Link One</span>
</div>
</a>
</li>
<li class="tile-node">
<a href="#" class="tile-node__link">
<div class="tile-node__content tile-node__content--bus">
<span class="tile-node__text">Link two</span>
</div>
</a>
</li>
<li class="tile-node">
<a href="#" class="tile-node__link">
<div class="tile-node__content tile-node__content--map">
<span class="tile-node__text">Another link</span>
</div>
</a>
</li>
<li class="tile-node">
<a href="#" class="tile-node__link">
<div class="tile-node__content tile-node__content--essentials">
<span class="tile-node__text">Another one</span>
</div>
</a>
</li>
<li class="tile-node">
<a href="#" class="tile-node__link">
<div class="tile-node__content tile-node__content--reminder">
<span class="tile-node__text">New link twooooo</span>
</div>
</a>
</li>
<li class="tile-node">
<a href="#" class="tile-node__link">
<div class="tile-node__content tile-node__content--book">
<span class="tile-node__text">Link three</span>
</div>
</a>
</li>
</ul>
答案 0 :(得分:-1)
我认为这对您有用,请查看演示代码段
.icon-tiles {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.tile-node {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1 33.33333%;
flex: 1 33.33333%;
padding: 2rem;
}
.tile-node__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tile-node__link {
background-color: #4d8acc;
padding: 10px;
/* flex: 1; */
height: 84px;
overflow: hidden;
justify-content: center;
flex-direction: column;
display: flex;
}
<ul class="icon-tiles">
<li class="tile-node">
<a href="#" class="tile-node__link">
<div class="tile-node__content tile-node__content--calendar">
<span class="tile-node__text">My Link One My Link One My Link One My Link One</span>
</div>
</a>
</li>
<li class="tile-node">
<a href="#" class="tile-node__link">
<div class="tile-node__content tile-node__content--bus">
<span class="tile-node__text">Link two</span>
</div>
</a>
</li>
<li class="tile-node">
<a href="#" class="tile-node__link">
<div class="tile-node__content tile-node__content--map">
<span class="tile-node__text">Another link</span>
</div>
</a>
</li>
<li class="tile-node">
<a href="#" class="tile-node__link">
<div class="tile-node__content tile-node__content--essentials">
<span class="tile-node__text">Another one</span>
</div>
</a>
</li>
<li class="tile-node">
<a href="#" class="tile-node__link">
<div class="tile-node__content tile-node__content--reminder">
<span class="tile-node__text">New link twooooo</span>
</div>
</a>
</li>
<li class="tile-node">
<a href="#" class="tile-node__link">
<div class="tile-node__content tile-node__content--book">
<span class="tile-node__text">Link three</span>
</div>
</a>
</li>
</ul>
答案 1 :(得分:-1)
这里是元素的高度和宽度相等的解决方案,但它们都是兄弟姐妹-如上面的注释所述。 我想,在您的解决方案中,宽度是必填项。 http://jsfiddle.net/heaversm/qbdov012/
body {
display: -webkit-flex;
-webkit-flex-flow: column wrap;
-webkit-align-items: center;
}
ul {
display: -webkit-flex;
margin: 0 20px;
max-width: 800px;
}
li {
-webkit-flex: 1 0 0px;
background-color: #eee;
padding: 20px;
overflow: hidden;
}
li:nth-child(even) {
background-color: #ccc;
}
<ul>
<li>Little content.</li>
<li>Moderate content. Moderate content. Moderate content.</li>
<li>Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content.</li>
</ul>
答案 2 :(得分:-1)
只需将以下内容添加到您的CSS类.tile-node__link
中,它将如下所示工作:
.tile-node__link {
width: 100%;
line-height: 6rem;
}
并从此类中删除padding: 2rem
。
我希望这会有所帮助。