相关疑难解决方法(0)

带有列表标签的网格列,我需要每3列以正确的顺序显示,并为每个额外的HTML列表元素启用自动宽度.

这是我的例子:

 <style>
        ul {
            margin: 0;
            padding: 0;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            height: 150px;
            width:auto;
        }
    
        li {
            float: left;
            display: inline-block;
            list-style: none;
            position: relative;
            height: 50px;
            width: 50px;
        }
    </style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    </ul>

我想像这样转换输出:

1 4 7 10
2 5 8 11
3 6 9 12

重要的是我到目前为止我的Safari浏览器工作,我似乎无法解决这个问题,我会适当的任何帮助:)

测试链接:

http://jsfiddle.net/rafcastro77/3zd7yspg/59/

我一直无法确定为什么flexbox在IE 11中不起作用.

为了测试,我从CodePen中获取了一个非常简单的flexbox布局,并粘贴了以下信息.

Chrome按预期工作; IE11失败了.

在Chrome上运行的布局成功图像:

IE11上布局失败的图像

body {
  background: #333;
  font-family: helvetica;
  font-weight: bold;
  font-size: 1.7rem;
}

ul {
  list-style: none;
}

li {
  background: hotpink;
  height: 200px;
  text-align: center;
  border: 2px solid seashell;
  color: seashell;
  margin: 10px;
  flex: auto;
  min-width: 120px;
  max-width: 180px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

<ul class="flex">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

http://codepen.io/hankthewhale/pen/IdKkB?editors=110

I'm having trouble with <div> heights in IE (specifically IE11). Works fine in Chrome.

So I'm essentially loading in processed PHP results with jQuery.html() and in IE my page wrap doesn't seem to fit the fill length of the page. I believe I've narrowed this down to:

<main id="place_results_wrap">

The height of that seems to shrink as soon as the following section and contents within are loaded in with jQuery.html().

<section class="place_results">

As part of the jQuery load, I'm using …

我正在使用flexbox创建一个简单而优雅的基于Flexbox的响应式布局.这是HTML示例:

<div class="box">
  <section class="box concise">
    <div class="box">
      this is just for test
    </div>
  </section>
  <!-- I can add more sections here,
      to serve as "cards", for example -->
</div>

以下是款式:

.box {
  display: flex;
  flex-wrap: wrap;
}

.box>* {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.box>.concise {
  flex-basis: auto;
  flex-grow: 0;
}

flex-basis: 0; flex-grow: 1; max-width: 100%;我的样式表的目的是默认在所有flex子项上,这样每个flex子项只会增长内容所需的数量,但仍然填充宽度,如果需要包装.它工作得很好.

可选项flex-basis: auto; flex-grow: 0;是使flex子项像以前一样根据需要增长,但不会比这更大,主要是围绕内容收缩包装flex项目.

<section>除非需要,我将用它来区分不会增长的"卡片".

section {
  background-color: white;
  border: 1px solid black;
}

这在Firefox和Chrome上看起来很漂亮.但它完全打破了Microsoft Edge …

使用或样式规则时，具有特定display类型的容器元素内的图像的行为有所不同。img { width: 0; }img { width: 0%; }

width增加使用除给出相同预期结果之外的任何单位 的值（仅占据显示的部分）。%img

button:first-of-type img {
  width: 0;
}

button:last-of-type img {
  width: 0%;
}

<h3>The image width: 0 (hides it)</h3>

<button>
      <img src="https://picsum.photos/id/1012/200/100">
      <p>Add playlist</p>
</button>


<h3>The image width: 0% (occupies the space (natural img width) and …