相关疑难解决方法(0)

我想有A B和C中间对齐.

我怎样才能D完全走向正确？

之前:

后:

这样做的最佳做法是什么？

ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
li:last-child {
  background: #ddd;
  /* magic to throw to the right*/
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

https://jsfiddle.net/z44p7bsx/

我试图<button>用flexbox的中心元素的中心元素justify-content: center.但Safari并不以它们为中心.我可以将相同的样式应用于任何其他标记,并且它按预期工作(请参阅<p>-tag).只有按钮左对齐.

尝试Firefox或Chrome,您可以看到差异.

是否有任何用户代理样式我必须覆盖？或者这个问题的任何其他解决方案？

div {
  display: flex;
  flex-direction: column;
  width: 100%;
}
button, p {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<div>
  <button>
    <span>Test</span>
    <span>Test</span>
  </button>
  <p>
    <span>Test</span>
    <span>Test</span>
  </p>
</div>

还有一个jsfiddle:http: //jsfiddle.net/z3sfwtn2/2/

我有两个高度为90%的div,但显示效果不同.

我试图在它们周围放置一个外部div,但这没有帮助.此外,它在Firefox,Chrome,Opera和Safari上也是如此.

有人能解释我为什么会遇到这个问题吗？

以下是我的代码:

<div style="height: 90%">
    <div ng-controller="TabsDataCtrl" style="width: 20%; float: left;">
        <tabset>
            <tab id="tab1" heading="{{tabs[0].title}}" ng-click="getContent(0)" active="tabs[0].active"
               disabled="tabs[0].disabled">
            </tab>


            <tab id="tab2" heading="{{tabs[2].title}}" ng-click="getContent(2)" active="tabs[2].active"
                 disabled="tabs[2].disabled">
            </tab>
        </tabset>
    </div>

    <div id="leaflet_map" ng-controller="iPortMapJobController">
        <leaflet center="center" markers="markers" layers="layers" width="78%"></leaflet>
    </div>
</div>

具有max-height样式的flexbox中的图像根据其是否具有其属性集height而显示为不同呈现width.

所述一个与属性,设置为图像的真实宽度/高度,使得与保留了其纵横比,但没有属性的那些尊重max-height和出现压扁.

.flex-parent {
  display: flex;
  max-height: 10vh;
}

<div class="flex-parent">
  <img                          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>

这就是Chrome 58中的显示方式(在Firefox 54中也是如此).

他们为什么渲染不同？管理这种行为的规则是什么？

我的(显然不正确)的理解是,高度和宽度属性会覆盖在图像加载时发现内在的高度和宽度,如果高度和宽度属性等于图像的尺寸,应该是在渲染一旦图像无差异装了.

上下文正在制作一个包含响应图像的页面,其中每个图像

• 可以有独特的原始尺寸
• 加载时不会导致重排,即在初始渲染时保留正确的空间(因此使用高度和宽度属性)
• 可以同时适应所有屏幕(因此我vh在CSS中搞乱)

青蛙图片来自https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg

我想要一个任意数字的div列,每个div的宽度为100%,高度为父div的100%,因此最初可以看到一个,而其他的则向下溢出父级.我设置的div有flex: 0 0 100%;,与父DIV中display: flex和flex-direction: column实现这一目标.

父div本身具有未知高度,因此它也是a的子项,display: flex并flex-direction: column设置为flex: 1 0 0在其容器中占用剩余空间.

在Firefox中输出是我想要的:

但是,不在Chrome中:

如何在没有Javascript的情况下在Chrome中实现Firefox风格？

您可以在http://plnkr.co/edit/WnAcmwAPnFaAhqqtwhLL?p=preview以及相应的版本中查看此操作,该版本flex-direction: row在Firefox和Chrome中均可使用.

供参考,完整的CSS

.wrapper {
  display: flex;
  flex-direction: column;
  height: 150px;
  width: 200px;
  border: 4px solid green;
  margin-bottom: 20px;
}

.column-parent {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  border: 2px solid blue;
}

.column-child {
  flex: 0 0 100%;
  border: 2px solid red;
}

和HTML

<div class="wrapper"> …

我发现如果我们设置一个块级别元素,有height:auto或height: 0~100%没有设置父级的高度具有显式值,并且其块级别子级具有底部边距,那么它将在Chrome中以不同方式计算高度,但在Firefox中则不同.对于设置的情况height: 1%:

http://codepen.io/anon/pen/BjgKMR

html {
  background: pink;
}

body {
  background: yellow;
}

div {
  height: 1%;
}

inner {
  margin-bottom: 30px;
  margin-top: 20px;
}

<div>
  <p class="inner">block level element</p>
</div>

div块的高度将计算为margin-bottom + content height of p element.我很困惑为什么height: 1%应该计算,auto因为父元素(html和body标签)没有明确设置其高度,但具有不同的高度,因为我们只是直接设置高度auto？

如果我们直接将其设置为height: auto,则显然只需将高度设置为子块级元素的高度,该高度不包括其下边距.

html {
  background: pink;
}

body {
  background: yellow;
}

div {
  height: auto;
}

inner …

我的页面上有一个动态页脚,我希望它上面的内容可以扩展到页脚的顶部,这很好,但是我遇到了一个问题:

#snippet-container {
  height: 300px;
  width: 200px;
}

#page {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#content {
  flex: 1 1 auto;
  background: blue;
}

#content .test {
  width: 100%;
  height: 100%;
  background: yellow;
  border: 2px solid red;
}

#footer {
  flex: 0 1 10vh;
  background: black;
}

<div id="snippet-container">
  <div id="page">
    <div id="content">
      <div class="test"></div>
    </div>
    <div id="footer"></div>
  </div>
</div>

我希望.test元素填充#content元素,因此100%/100% width/height它不会.

当我.test在片段中为元素添加红色边框时,您可以看到这反映出来.

我想制作一个满足以下条件的布局:

1)它顶部有一个块height,其内容符合其内容

2)它下面有一个code-mirror和一个块,它完全填写页面的其余部分height.

我在这里做过一个傻瓜.问题是它运作良好Chrome 57.0.2987.133,但它不能很好地工作Safari 10.1:height它code-mirror是不够的; 它只显示76代码行而不是正确的80行.

有谁知道如何解决这一问题？

<style>
    .rb {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .rb .container {
        flex: 1;
        display: flex;
        width: 100%;
        height: 100% /* new */
    }
    .rb .first-row {
        border: 1px solid black;
        /*flex: 0 0 60px;*/
    }
    .rb .CodeMirror {
        flex: 1;
        height: auto;
    }
    .rb .flex-preview {
        flex: 1; …

我正在开发一个单页网络应用程序，它最常用于移动设备。它的功能之一是地图模式，可以暂时接管整个浏览器窗口；距离比例尺和一些控件附在地图的四个角上。这是地图的一个小截图，所以你可以知道我在说什么：

地图被实现为一个<div>，position: fixed并且所有四个坐标为零；我还在地图可见时临时将 设置为<body>，overflow: hidden以处理底层应用程序显示从原点滚动的情况。这足以使地图在桌面浏览器上完全按照我想要的方式工作。移动浏览器还要求我提供一个类似的元视口标签，"width=device-width,user-scalable=no"以使窗口的可见区域与视口完全对应。

这所有的工作精美几年前，当我最初写这个程序，但沿线的iOS Safari浏览器停止接受任何涉及缩放元视口选项的地方-显然太多的网站被误用的标签，导致文本是unreadably小，但不可缩放。目前，如果您在此浏览器上启用地图，您可能会看到一个稍微放大的视图，这会切断右侧和底部的那些按钮 - 而您对此无能为力，因为所有触摸都被解释为地图的缩放/平移手势，而不是浏览器滚动。如果没有通过这些按钮访问的功能，地图就不会非常有用 - 如果没有右上角的按钮，您甚至无法关闭地图。唯一的出路是重新加载页面，这可能会导致未保存的数据丢失。

我肯定会添加history.pushState/的使用，onpopstate以便地图叠加层表现得像一个单独的页面。您可以使用浏览器的后退按钮退出地图模式 - 但这并不能解决由于缺少按钮而导致的其余功能损失。

我已经考虑使用.requestFullscreen()来实现地图覆盖，但并非所有地方都支持该应用程序本来可以使用。特别是，它显然在 iPhone 上根本不起作用，而在 iPad 上，您会看到一个状态栏和一个覆盖您内容的巨大“X”按钮——我的距离刻度可能不再可读了。无论如何，这在语义上并不是我真正想要的 - 我需要 full window，而不是全屏。

如何在现代浏览器上获得全窗口显示？我能找到的关于这个主题的所有信息都在谈论使用元视口标签，但正如我提到的那样不再有效。

我正在尝试构建一个定价表,其中每列包含一张卡片.我希望所有卡片都伸展到其父(.col)元素的高度.

注意:我正在使用Bootstrap 4,并尝试使用现有的网格系统(为了保持一致性)和这个特定的标记来实现这一点.我无法让卡片增长到父容器的高度.这是否可以使用当前标记？

基本标记是这样的:

<div class="row">
    <div class="col">
        <div class="card">
          blah
          blah
          blah
        </div>
        <div class="card">
          blah
        </div>
        <div class="card">
          blah
        </div>
    </div>
</div>

这是我的笔:https://codepen.io/anon/pen/oZXWJB