小编Pau*_*e_D的帖子

我正在努力创建这个:http://imgur.com/G2TpjDR

我有什么:https://jsfiddle.net/tzayffsv/

我使用带有参数的flexbox:flex-direction:column,flex-wrap:wrap.问题是包装时出现在屏幕外的物品......有任何想法如何使用flexbox(或其他想法)做到这一点？我不寻找使用javascript和定位项目作为绝对的解决方案..

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

使用Bootstrap 4，我如何拥有这样的东西：

[ 1 ] [ 4 ]
[ 2 ] [ 5 ]
[ 3 ] [ 6 ]

换句话说，如何将一个列表分成相等的两列，仅使用一个将其垂直排序<ul>？因此，例如，我可以拥有动态数量的商品吗？

我可以使用column-width并且column-count 喜欢这样，但是我想知道是否可以使用Bootstrap 4网格系统实现相同的效果。

我正在尝试将flex div堆叠成3行，有时我会有3 div，有时是6或21，依此类推。我弄清楚了宽度和填充，但是我不知道如何让它们开始。每3套之后的新行。

我该如何实现？现在，将它们全部放在一行中。

HTML代码是这样的：

<div id="container">

  <div class="sections__container">

        <div class="sections__container__a">A-1</div>
        <div class="sections__container__b">A-2</div>
        <div class="sections__container__c">A-3</div>

        <div class="sections__container__a">B-1</div>
        <div class="sections__container__b">B-2</div>
        <div class="sections__container__c">B-3</div>

  </div> 

</div>

每个flex div都使用CSS，例如：

width: 33.33%;
height: 100%;
float: left;
flex-grow: 1;

这是一个使事情变得更轻松的jsFiddle：https ://jsfiddle.net/xr746syj/

非常感谢您的任何建议:)

当我添加margin到网格时，由于width网格元素为 33.33%，因此各部分垂直堆叠。

另外，我不想使用任何框架（我想通过使用自定义 CSS 来做到这一点）。

示例网站

我无法在项目中更改字体真棒图标的颜色(使用css中的color属性).我认为我们加载字体真棒图标的方式可能会影响我们改变颜色的能力.

在有人将此标记为重复之前,请查看下面的jsfiddle.

您将从html(第7行和第10行)看到我们正在从我们自己的服务器加载一组预定义的fa图标.这是因为,由于我的组织工作的性质,我们不允许加载外部文件.

https://jsfiddle.net/moosefetcher/dnjjy015/1/

这是html:

<div class="page">
  <div id="fb-user-research">
    <span class="fb-checkbox">
      <input id="fb-user-research-checkbox" type="checkbox" name="fb-checkbox"/>
      <label for="fb-user-research-checkbox" id="fb-visible-checkbox">
        <svg class="unchecked fa-square-0">
          <use xlink:href="~/Areas/CL/Content/app/images/icons/icon-svg-defs.svg#fa-square-o" />
        </svg>
        <svg class="checked fa-check-square">
          <use xlink:href="~/Areas/CL/Content/app/images/icons/icon-svg-defs.svg#fa-check-square" />
        </svg>
      </label>
    </span>
    <div id="fb-user-research-texts">
      <p>Placeholder text here</p>
      <p>Disclaimer here.</p>
    </div>
    <div class="clear"></div>
  </div>
</div>

这是css:

.page {
  background-color: #000000;
  height: 400px;
  padding: 15px;
}

#fb-user-research {
        border-radius: 3px;
        border: 1px solid #333333;
        margin: 44px 0px 14px 0px;
        padding: 15px 15px;
    }

    #fb-user-research input {
        border-radius: 2px;
        background-color: #333333; …

我需要弹性框像截图我创建演示,但我不需要所有项目

截图:

.flex-container {
  display: flex;
  justify-content: center;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

https://jsfiddle.net/parthjasani/103t93xd/

我想知道是否有一种方法可以在不使用 JavaScript 的情况下将动态数量的行和列分配给网格布局？我见过的每个示例都包含一些 Javascript，到目前为止，我仅了解 HTML 和 CSS（学生）。我想要实现的是，当我添加内容时，我不想在 CSS 中创建新行。我也不知道是否可能，但如果我可以仅重复两行作为基本布局，那就太好了，我希望在行之间交替颜色，并且除了使用它们来放置其他内容之外没有其他属性。

编辑：

好吧，我尝试建立一个网格

<div class="grid-container"></div>
<div class="grid-item1"></div>
<div class="grid-item2"></div>
<div class="grid-item3"></div>...

这种方式的问题是我必须为我想要的每一行或每一列手动添加一个新的网格项。我在重复中找到了部分解决方案。

.grid-container {
grid-template-rows: repeat(20, 10px);
}

但我不确定这是否意味着当我用完行时我将留下滚动的白色区域并且我将不得不更改我的CSS，这是我所期望的，或者我是否只需要返回手动添加新的网格项目。我正在尝试找到一种方法来指定我的 CSS 文件，生成未知数量的行，以便在添加内容时，我不必手动添加网格项。

我有一个看似简单的要求，一个固定大小<ul />的 items列表<div />。列表中的项目应该从左到右布局，填充可用空间，然后再换行到下一行。

这是基本的 HTML

<ul class="list-unstyled d-flex">
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  ......
</ul>

这个类.d-flex很简单：

.d-flex {
    display: flex !important;
}

这个类.list-box只控制盒子的大小。

发生的情况是这些框从左到右排列在一行中，如果屏幕宽度的框太多，则会<ul />获得一个水平滚动条。

这是一个工作示例：

<ul class="list-unstyled d-flex">
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  ......
</ul>

.d-flex {
    display: flex !important;
}

为什么不<li />包裹？

为了学习，我正在用 HTML、CSS 和 PHP 制作一个登录注册系统。会有不同的 HTML 文本框和东西。

我想要实现的是，当我在一个文本框中写一些东西，然后取出光标并单击另一个文本框时，我想将第一个文本框的边框颜色更改为绿色。

我知道如何通过 CSS 更改边框颜色，但我只想在发生此类事件时执行此操作。任何帮助将不胜感激。

我正在尝试使用 CSS 在 HTML 中创建渐变背景。渐变应该从顶部 10% 为红色，其余部分 (80%) 应该为绿色，如下所示：

为此，我编写了以下代码：

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            html, body{margin: 0; padding:0;}
        </style>
    </head>
    <body>
        <div style="position: fixed; z-index: 1; background: linear-gradient(red 10%, green); height: 100%; width:100%"></div>
    </body>
    <script>
    </script>
</html>

但是，我得到这个输出：

请告诉我的代码有什么问题以及如何实现我的目标。