相关疑难解决方法(0)
推荐指数
解决办法
查看次数
柔性物品是否可以与其上方的物品紧密对齐？
实际上,这是Pinterest布局.但是,在线发现的解决方案包含在列中,这意味着容器无意中水平生长.这不是 Pinterest布局,并且它不适用于动态加载的内容.
我想要做的是有一堆固定宽度和不对称高度的图像,水平放置,但当满足固定宽度容器的限制时包裹在一个新行中:
flexbox可以做到这一点,还是我不得不求助于像Masonry这样的JS解决方案？
推荐指数
解决办法
查看次数
flex-wrap如何使用align-self,align-items和align-content？
align-self
在以下代码中,align-self使用flex-wrap: nowrap.
flex-container {
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
flex-item:last-child {
align-self: flex-end;
background-color: crimson;
}<flex-container>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>但是当容器切换到时flex-wrap: wrap,align-self属性会失败.
flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: …推荐指数
解决办法
查看次数
包裹时,删除多行柔性物品之间的空隙(间隙)
我试图在一个具有设定高度的容器中将多个项目放在彼此之下.如果没有空间,物品将彼此相邻.
这是个主意:
我试图使用flexbox实现这一点,flexbox是一个设置高度的容器,方向设置为column并且flex-wrap是wrap:
问题是列之间存在很大差距.
我试着设置都justify-content和align-items到flex-start,但是这可能是默认值.
有什么方法可以解决这个问题吗？
这是代码:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
flex-direction: column;
background-color: #ccc;
}
.items {
width: 100px;
height: 100px;
margin: 10px;
background-color: tomato;
color: white;
font-size: 60px;
font-weight: bold;
text-align: center;
padding: 15px;
}<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
</div>推荐指数
解决办法
查看次数
使div在网格中跨越两行
我有一个装满了块的页面display: inline-block.我想做四到两倍大,所以我用float: left或者right把其他块放在一边.
我的问题是,如果我有一个五行元素,我怎么能在它的中间放一个更大的元素？(float自然而然地放在一边).
这是一个示例代码段:
#wrapper{
width: 516px;
}
.block{
display: inline-block;
width: 90px;
height: 50px;
margin: 5px;
background-color: red;
}
.bigger{
height: 110px;
}<div id="wrapper">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block bigger"></div>
<div class="block"></div>
<div class="block"></div>
</div>以下是我希望从上面的代码段中获得的内容 
推荐指数
解决办法
查看次数
CSS等高柱
我想在我的css表中使用百分比.不幸的是,它对我不起作用.
这段代码出了什么问题？我应该使用flexbox而不是table吗？
我想用表,因为我想要相同的高度列.
ul {
list-style: none;
margin: 0;
display: table;
table-layout: fixed;
width: 100%;
}
li {
width: 50%;
display: table-cell;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>推荐指数
解决办法
查看次数
标签 统计
css ×6
css3 ×5
flexbox ×5
html ×2
css-grid ×1
css-tables ×1
grid-layout ×1
javascript ×1
pinterest ×1