相关疑难解决方法(0)

我需要实现一个相当普遍的磨坊砌体布局.但是,出于多种原因,我不想使用JavaScript来执行此操作.

参数:

• 所有元素都具有相同的宽度
• 元素的高度无法在服务器端计算(图像加上各种文本量)
• 如果必须的话,我可以使用固定数量的列

有这一个简单的解决方案,在现代浏览器,工作的column-count性质.

该解决方案的问题是元素按列排序:

虽然我需要按行排序元素,至少大约:

我试过的方法不起作用:

• 制作物品display: inline-block:浪费垂直空间.
• 制作物品float: left:lol,没有.

现在我可以更改服务器端渲染并重新排序项目数除以列数的项目,但这很复杂,容易出错(基于浏览器决定将项目列表拆分成列的方式),所以我想要尽可能避免它.

是否有一些新奇的flexbox魔法可以实现这一目标？

实际上,这是Pinterest布局.但是,在线发现的解决方案包含在列中,这意味着容器无意中水平生长.这不是 Pinterest布局,并且它不适用于动态加载的内容.

我想要做的是有一堆固定宽度和不对称高度的图像,水平放置,但当满足固定宽度容器的限制时包裹在一个新行中:

flexbox可以做到这一点,还是我不得不求助于像Masonry这样的JS解决方案？

我想要实现以下目标:

我的第一次尝试是使用辅助div(绿色):

的jsfiddle

我在这里可以做的是使用JavaScript将移动屏幕上的puple和orange元素移出帮助器.但必须采用简单的CSS方式.

我的第二次尝试是删除帮助程序并构建移动布局:

的jsfiddle

有没有办法将两个元素放在一起flex-direction: row？(第二次尝试)

如果不使用表格display:table,是否可以为输入左侧的标签设置灵活的宽度区域？出于浏览器兼容性原因,我还想避免网格布局.我希望css能够解决这个问题:

short_label   input_box____________________
tiny_label    input_box____________________
medium_label  input_box____________________

然后还相应处理更大的标签:

short_label            input_box__________
medium_label           input_box__________
very_extra_long_label  input_box__________

但我不想要:

short_label            input_box__________
tiny_label             input_box__________
medium_label           input_box__________

因此第一列需要具有灵活的宽度,第二列需要增长以填充空间.我的html理想情况下看起来像这样,但如果有必要,可以添加"行"div.我觉得有一个灵活的答案,但也许不是因为所有行都需要对齐.

<div class='aligned_form'>

  <label for='a'>short_label</label>
  <input type='text' id='a'>

  <label for='b'>medium_label</label>
  <input type='text' id='b'>

  <label for='c'>very_extra_long_label</label>
  <input type='text' id='c'>

</div>

这些是3 inline-block和元素,这意味着它们将彼此相邻排序.

这是一个观看现场活动的小提琴:https://jsfiddle.net/8mdm8eox/

.wrapper {
  background: #fff;
  width: 100%
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  width: calc(100%/3)
}

.firstElement {
  background: #000;
  color: #fff
}

.secondElement {
  background: grey
}

.thirdElement {
  background: #ddd
}

@media (max-width: 767px) {}

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

所以这就是我想要的,我想在屏幕宽度为767px或更低时:

@media (max-width: 767px){}

前两个元素是垂直排序的,第三个元素是与另外两个元素水平排序的,所以它们变成了:

   _______________    ________________
   |First Element|    |?              |
   _______________    |              |  
                      |Third Element |
   ________________   |              |
   |Second Element|   |              | …

在大屏幕上，我想在左侧创建一列，在右侧创建具有2个堆叠框的另一列。

在小屏幕上，这些列应堆叠为单个列。但是，框的顺序应为2、1、3。

这是一个例子：

我将flex容器设置为flex-direction: column和flex-wrap: wrap，将box 1设置为flex-basis: 100%，但这不会使后两个项目换行到下一列。

在flexbox中如何实现这种布局？

这是我到目前为止的演示：

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.cell {
  background: #ccc;
  border: solid 3px black;
  width: 50%;
}
.cell-1 {
  flex-basis: 100%;
}
@media (max-width: 500px) {
  .cell {
    width: 100%;
  }
  .cell-1 {
    order: 2;
  }
  .cell-2 {
    order: 1;
  }
  .cell-3 {
    order: 3;
  }
}

<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the …

基于上一个问题,我正在尝试为我的网格布局添加更大的块.在最后一个问题中,我需要一个div跨度多行.现在的问题是我需要一个div来跨越多个行和列.

如果我有一个五行元素,我怎么能在它的中间放置更大的元素？(因为float它自然而然地放在一边).

这是一个示例代码段:

#wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
}
.larger{
  height: 110px;
  width: 190px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block larger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

我不想display: grid用于包装元素,因为我可以使用 状态这是一个非常先进的技术.我希望有一个非网格,非表格解决方案.

以下是我希望从上面的代码段中获得的内容

我有一个弹性盒问题.谁能指出我正确的方向？甚至可能是因为它的工作方式,flex-box无法解决这种情况.

1. 我想在4列中显示内容.

2. 让内容以列式格式列出,并在空间不足时换行到下一列.

   display: flex; 
   flex-direction: column; 
   flex-wrap: wrap; 
   height:<##>px
   

   Run Code Online (Sandbox Code Playgroud)

   应该照顾好这个.

   但这就是事情变得棘手的地方.如果我不想要一个固定的高度,但是根据内容的长度增长/缩小的高度怎么办？

   

3. 容器的高度是动态的.与案例B​​类似,案例A中的行从4行增长到7行.内容设置为尽可能填充所有列.

.other-nearby-cities {
  display: flex;
  flex-direction: column;
  height: 700px;
  flex-wrap: wrap;
  border: solid 1px;
}

<ul class="other-nearby-cities">
  <li><span class="capitalize">Altamonte Springs</span><span> (5)</span></li>
  <li><span class="capitalize">Apopka</span><span> (11)</span></li>
  <li><span class="capitalize">Arcadia</span><span> (11)</span></li>
  <li><span class="capitalize">Auburndale</span><span> (5)</span></li>
  <li><span class="capitalize">Belle Glade</span><span> (10)</span></li>
  <li><span class="capitalize">Boca Raton</span><span> (33)</span></li>
  <li><span class="capitalize">Bonita Springs</span><span> (10)</span></li>
  <li><span class="capitalize">Boynton Beach</span><span> (21)</span></li>
  <li><span class="capitalize">Bradenton</span><span> (46)</span></li>
  <li><span class="capitalize">Brandon</span><span> (16)</span></li>
  <li><span class="capitalize">Brooksville</span><span> (8)</span></li>
  <li><span class="capitalize">Cape Coral</span><span> (17)</span></li>
  <li><span class="capitalize">Clearwater</span><span> (90)</span></li>
  <li><span class="capitalize">Clewiston</span><span> (9)</span></li>
  <li><span class="capitalize">Cocoa</span><span> …

我想创建一个tile布局(类似于metro风格的tile布局或者它叫做Windows 8).所以我有一些瓷砖/盒子,有些是二次的,有些可以是两倍和二次,有些可以有两倍的宽度.到目前为止一切都那么好,但是我有一个响应性的问题,我认为flexbox会为我解决......但也许我错了.

目前这些盒子是这样的(箭头显示盒子应该"流动"):

但是我希望它们看起来像这样:

或者甚至是这个,如果一个大瓷砖放在中间的某个地方(注意:编号也可能有点不同,例如,大瓷砖左边的方框可能是1-4,然后大瓷砖可能是5号,如果这更容易做到):

这是我目前的代码(参见http://codepen.io/anon/pen/oXmraK):

<div class="container">
  <div class="bigbox">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
  <div class="box">Box 7</div>
  <div class="widebox">Box 8</div>
  <div class="box">Box 9</div>
  <div class="box">Box 10</div>
  <div class="box">Box 11</div>
  <div class="box">Box 12</div>
  <div class="box">Box 13</div>
  <div class="box">Box 14</div>
  <div class="box">Box 15</div>
  <div class="box">Box 16</div>
  <div class="box">Box 17</div>
  <div class="box">Box 18</div>
  <div class="box">Box 19</div>
</div>

和CSS:

.container {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start; …

我正在尝试实现以下布局.显然,它不可能是flexbox.没有javascript实现此效果的最佳方法是什么？

我有以下几个要素:

    <div class='container'>
      <div class='left-bar'/>
      <div class='center-bar'/>
      <div class='right-bar'/>
    </div>

我想要以下效果:

大屏幕:

    _____ ________ _____
   |     |        |     |
   | l-b | center | r-b |
    `````|        |     |
          ```````` `````

中等屏幕(我不能让这一个工作):

    _____ ________ 
   |     |        |
   | l-b | center |
   |`````|        |
   | r-b |```````` 
   |     | 
   ´´´´´´

小屏幕:

    ________ 
   |        |
   |  l-b   |
   |````````|
   |  r-b   | 
   |        | 
   |````````|
   | center | 
   |        | 
    ````````

目前我尝试了这个没有成功:

   .container {
     display: flex;
     flex-flow: row wrap;
   } …