相关疑难解决方法(0)

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

带有列表标签的网格列,我需要每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进行简单的设计,但我遇到了IE11的问题.基本上,我想要一个仅在内容不够高时才能粘在底部的页脚.我这样做对Chrome没有任何问题:

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

<header>
  Header
</header>
<main>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
  <p>Main</p>
</main>
<footer>
  Footer
</footer>

只需<p>main</p>使用IE11来查看错误行为的数量即可.

有没有办法在没有JavaScript的情况下实现这一目标？

我想在flexbox中有一个方形div.所以我使用:

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
  padding-bottom: 50%;
}

<div class="outer">
  <div class="inner">
    <a>hehe</a>
  </div>
</div>

这在Chrome中运行良好.但在Firefox中,父母只挤到一行.

我如何在Firefox中解决这个问题？我使用的是44版.

您还可以在https://jsbin.com/lakoxi/edit?html,css查看代码

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 …

我的网站在IE11中完全破碎了.问题来自于flex: 1 1 0%;,由于autoprefixer和postcss-flexbugs-fixes我到处使用.

当我将其flex: 1 1 auto;更改为时,该网站确实可以在IE上运行,但随后某些行为也会发生变化(例如,一个带有两个flex: 1 1 auto;孩子的弹性箱不会占用完全相同的空间).因此,这个解决方案在其他浏览器上破坏了我的设计(虽然在IE11上使它更好 - 而不是破坏).

人们如何设法使用Flexbox构建自己的网站在IE11上运行？

编辑:这是一支笔,突出了我面临的问题:https://codepen.io/Zephir77167/pen/GMjBrd(在Chrome和IE11上试试).

Edit2:这是代码:

HTML:

<div id="a" class="flex">
  <div id="b" class="item flex-1">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1">
    Heyheyheyheyho
  </div>
</div>
<br />
<div id="a" class="flex">
  <div id="b" class="item flex-1-variation">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1-variation">
    Heyheyheyheyho
  </div>
</div>

CSS:

* { …

下面的小提琴有三个街区.

块1包含三列.中间列中有两行,每行设置为flex:1.

块2包含三列.中间列中有两行,每行设置为flex:1.第二行包含一张狗的图像.图像不会缩小到包含它的行的高度.

块3仅包含中间列,其中包含两行,每列设置为flex:1.第二行包含一张狗的图像.图像会缩小到包含它的行的高度.

问题是为什么第2块中间栏第二行的图像没有缩小到包含它的行的高度？我可以添加什么CSS规则来实现这一目标？

.block{
    height:100px;
}

.wrapper{
    border:5px solid purple;
    display:flex;
    flex-direction:row;
}

.column{
    flex:1;
    border:3px solid yellow;
}

.middle{
    display:flex;
    flex-direction:column;
}

.first{
    background:red;
}

.second{
    background:orange;
}

.third{
    background:purple;
}

.row{
    flex:1;
    border:1px solid black;
    display:flex;
    align-items:stretch;
}

img{
    flex:1;
}

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div>
  <div class="row second"></div>
      	
</div>
<div class="right column"></div>
</div>

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div> …

我正在使用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 …

我flex-basis: 0%;遇到的问题以及当用户减小窗口的宽度时IE11如何处理它。可能与box-sizing的错误有关。

我有可变数量的flex-children，每个孩子的宽度都未知。每个孩子都有任意动态生成的内容。但是，其中某些内容必须具有包装文字的功能。

伸缩式容器本身必须具有100％的宽度，并且必须能够包装其子级（即flex-wrap: wrap）。

假设存在三个flex-children，最后一个需要文本包装：

<div class="flex-container">
  <div class="flex-child">
    <div>This text should not overlay other flex-children.</div>
  </div>
  <div class="flex-child">
    <div>This text should not overlay other flex-children.</div>
  </div>
  <div class="flex-child">
    <div class="text-break">This text should break on new lines when the container shrinks down</div>
  </div>
</div>

CSS可以定义如下：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.flex-child {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0%;
  white-space: nowrap;
  padding: 5px;
}

.text-break {
  white-space: pre-wrap;
}

当窗口足够宽时，每个flex-child应该并排放置，并且文本不会折叠： …

使用或样式规则时，具有特定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 …