相关疑难解决方法(0)
仅CSS的砌体布局
我需要实现一个相当普遍的磨坊砌体布局.但是,出于多种原因,我不想使用JavaScript来执行此操作.
参数:
- 所有元素都具有相同的宽度
- 元素的高度无法在服务器端计算(图像加上各种文本量)
- 如果必须的话,我可以使用固定数量的列
有这一个简单的解决方案,在现代浏览器,工作的column-count性质.
该解决方案的问题是元素按列排序:
虽然我需要按行排序元素,至少大约:
我试过的方法不起作用:
现在我可以更改服务器端渲染并重新排序项目数除以列数的项目,但这很复杂,容易出错(基于浏览器决定将项目列表拆分成列的方式),所以我想要尽可能避免它.
是否有一些新奇的flexbox魔法可以实现这一目标？
推荐指数
解决办法
查看次数
可变高度的CSS浮动分区
我有无限数量的100px宽度的div,可以放入250px宽度的父级.无论高度如何,我都需要将div显示在行中,如图所示.我已经尝试过解决这个问题,但div高度似乎搞砸了.
我非常感谢你的帮助.谢谢 :)
<style>
#holder{
width:250px;
border:1px dotted blue;
display:inline-block;
}
.box{
width:100px;
height:150px;
background-color:#CCC;
float:left;
text-align:center;
font-size:45px;
display:inline-block;
}
.one{
background-color:#0F0;
height:200px;
}
.two{
background-color:#0FF;
}
.three{
background-color:#00F;
}
.four{
background-color:#FF0;
}
</style>
<div id="holder">
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
<div class="box four">4</div>
</div>
这是jsfiddle
这是我用javascript https://jsfiddle.net/8o0nwft9/所做和所取得的成就
推荐指数
解决办法
查看次数
柔性物品是否可以与其上方的物品紧密对齐？
实际上,这是Pinterest布局.但是,在线发现的解决方案包含在列中,这意味着容器无意中水平生长.这不是 Pinterest布局,并且它不适用于动态加载的内容.
我想要做的是有一堆固定宽度和不对称高度的图像,水平放置,但当满足固定宽度容器的限制时包裹在一个新行中:
flexbox可以做到这一点,还是我不得不求助于像Masonry这样的JS解决方案？
推荐指数
解决办法
查看次数
CSS:在多行上浮动多个具有不同高度的元素？
我正在尝试将divs 组织成两列,但不强制它们成行.我也试图保持divsa 之间的垂直间距不变.
您可以看到以下演示,如果每列中的div之间没有大量的垂直空白,这将是正确的.
HTML
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
<div class="module"></div>
我以为我可以用静态宽度将它们漂浮到左边,但显然这不起作用.
有任何想法吗？
推荐指数
解决办法
查看次数
Flexbox堆叠不同高度的孩子
我正在建立一个图像组合网站,我需要根据图像的可变大小来堆叠图像.到目前为止,这是我用flexbox实现的:
这就是我想要的地方!
有人知道如何让孩子在Flexbox显示器上堆叠这种方式吗？我发誓我在flexbox教程的任何地方都找不到这个特殊的结构,虽然我已经在tumblr博客显示器上看过几次了.
这是我的代码:http: //jsfiddle.net/822h7ztd
.flexman {
width:100%;
padding: .2vw;
flex-flow: row wrap;
display: flex;
}
.flexman div {
background: red;
width: 100px;
height:50px;
margin: .2vw;
}
推荐指数
解决办法
查看次数
将内容放入最短的列
我很确定我在这里很傻,但我有一个'仪表板'类型的布局,其中我有两列不同的高度.我有第三个项目,我想添加到最短的列(见附件)
在第一个示例中,第1列较短,因此我们在下面添加第3项,但如果第2列较短,则应该在那里.
我以为我应该使用浮子,但它不能正常运行.
有人可以赐教!
推荐指数
解决办法
查看次数
DIV在两个方向上的紧凑排列
使用浮动水平排列DIV很容易.例如:
<div style="width: 500px;">
<div style="float:left; width: 200px; height: 100px; background-color:Yellow;"></div>
<div style="float:left; width: 150px; height: 60px; background-color:Blue;"></div>
<div style="float:left; width: 140px; height: 240px; background-color:Green;"></div>
<div style="float:left; width: 180px; height: 200px; background-color:Red;"></div>
<div style="float:left; width: 130px; height: 160px; background-color:Purple;"></div>
</div>
这将产生:
但是如何横向和纵向排列DIV？在这种情况下,如何在有空的空间(黄色和蓝色DIV下)移动红色和紫色DIV？
注意:这只是一个例子,我希望找到一种方法来为任何一组DIV进行排列(不仅仅是这个典型的例子).
推荐指数
解决办法
查看次数
Bootstrap Grid:垂直浮动列
我正在使用Bootstrap网格进行项目,我想知道是否可以使列垂直浮动.截至目前,我似乎无法找到一种方法使这成为可能.我正在寻找一个针对Boostrap网格或使用其他网格的自定义css形式的问题的解决方案.但是我希望网格只使用css设置,不使用JavaScript.
这个例子有一个图像和一个链接:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Test</title>
<style type="text/css">
body {
margin-top: 20px;
}
.container {
padding: 0 10px;
}
@media (min-width: 768px) {
.container {
width: 768px;
}
}
@media (min-width: 992px) {
.container {
width: 868px;
}
}
.div1, .div2, .div3, .div4, .div5, .div6 {
background-color: #999;
border-radius: 6px;
width: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
font: bold 28px 'Arial';
}
.div1 {
height: 120px;
}
.div2 {
height: 260px;
}
.div3 { …推荐指数
解决办法
查看次数
如何忽略以不同高度创建的边距内联块？
我有一个问题,其中块堆栈为2,接下来的2个块从前2个块的末尾开始.如此JSFiddle演示中所示.
HTML:
<div class="container">
<div class="inline">
A div with less content than that one >
</div>
<div class="inline">
A div with more content than the one on the left. Now Inline 3 goes down to where this div ends. I want to move it up however, so it's right under the div that's above Inline 3.
</div>
<div class="inline">
Inline 3
</div>
<div class="inline">
Inline 4
</div>
</div>
CSS:
.container {
width:600px;
background-color:rgb(40,40,40);
}
.inline {
width:calc(50% - …推荐指数
解决办法
查看次数
使用CSS/CSS3如何构建流体列布局,其中不同高度的项目出现在上面的项目附近？
使用下面的代码(在图像之后)我得到这样的布局:
但我想要的是这样的布局:
我目前的代码:
CSS:
#columns
{
column-width: 320px; /* change to EM later */
column-gap: 15px;
width: 90%;
max-width: 770px;
margin: 50px auto;
}
#columns .card
{
background: #fefefe;
border: 2px solid #fcfcfc;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 2px 15px;
padding: 15px; padding-bottom: 10px;
transition: opacity .4s ease-in-out;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
column-break-inside: avoid;
display: inline-block;
background-color: #e8e8e8;
}
#columns:hover .card:not(:hover)
{
opacity: 0.4;
}
#card1
{
width: 320px;
height: 200px;
}
#card2 …推荐指数
解决办法
查看次数