小编Jac*_*991的帖子

我做了一个flex布局,其中四个列/盒并排放置在父div中.我在980px处添加了一个媒体查询,增加了列的宽度,并添加了一个flex-wrap,将两个右侧列推到一个新行上,创建了一个2 x 2样式的布局.这适用于除Safari之外的所有浏览器,其结果非常不可预测.

小提琴:https://jsfiddle.net/gjy1t16p/6/

如果您在Chrome中查看此内容并将窗口拖动到980px以下,它将按照我上面描述的方式工作.然而,在Safari中,虽然我没有设法完全重新创建问题,但是盒子垂直堆叠.

正如我所提到的,结果是不可预测的 - 当在我的网站上实现时,布局实际上比我制作的小提琴更接近工作.在网站上,2 x 2布局有效,但前提是第四个框内没有文本/小部件.一旦它包含到达框的整个宽度的内容,它向下移动到第三个框的下面,就像我尝试在其后添加的任何其他框一样.

如果有人以前经历过这个bug并知道如何解决它,我会非常感激.我整天都在努力解决这个问题,而且我完全没有想法.

HTML:

<footer class="footer">

<div class="footer-container">

<div class="footer-column" id="column-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

<div class="footer-column" id="column-2">Lorem ipsum dolor sit …

我的网站上的移动菜单底部有一个基于 flex 的社交媒体图标的无序列表。

我试图让三排并排坐着，等距。我已经用规则管理了这个

justify-content:space-around

但我的问题是，当项目超过三个时，下一行开始从中心填充，而我希望它从左侧填充，因为用户会随着时间的推移添加更多图标。

我解释得越深入，我就越不确定这是否可能，但我想我会把它扔在那里以防万一。

是否可以使下一行中的列表项从容器的左侧开始而不会弄乱justify-content:space-around规则？

目前他们只有在两排都有三个时才排队。

这是代码

justify-content:space-around

.box {
  width:275px;
  height:275px;
  background-color:yellow;
}

ul { 
  width:auto;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  flex-wrap: wrap;
  padding: 30px 20px 30px 20px;
  list-style: none; 
}

li {
  width:30px;
  height:30px;
  margin:15px;
  background-color:red;
}

在下面的 jsfiddle 中有两个按钮，可在屏幕左侧或右侧打开菜单 div。

当菜单打开时，网站的其余部分（我使用了 html div）随之移动。

我的问题是，当打开左侧菜单时，html div 变得可左右滚动，而当打开右侧菜单时则不会。

我不确定为什么会这样，但如果可能的话，我想删除从左到右的滚动，而不添加，overflow:hidden因为这样我也会失去上下滚动的能力。

https://jsfiddle.net/8nj5y4t1/62/

我的代码如下：

HTML：

<header class="header">
  <span id="button-one"></span>
  <span id="button-two"></span>
  <div class="push-menu-one"></div>
  <div class="push-menu-two"></div>
  <div class="overlay"></div>
</header>

<div class="content"></div>

<footer class="footer"></footer>

CSS：

html {
  position:relative;
  height:100%;
  left:0;
  right:0;
  background-color:pink;
  -webkit-transition: all .6s cubic-bezier(.645,.045,.355,1);
  transition: all .6s cubic-bezier(.645,.045,.355,1); 
}

body {
  min-height:100%;
  margin:0; 
  padding:0; 

  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
    display:flex;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
    flex-direction: column;
}

.header {
  height:70px;
  width:100%;
  background-color:white;
}

.content {
  -webkit-box-flex: 1; …

我的标题中有一个无序列表菜单，它在父列表项上有子菜单。我一直在尝试设置 :hover 伪类，以便在将光标移到链接上时使子菜单淡入淡出。

问题是我只能让它们淡入，所以当我将光标移开时，它们不会淡出，它们会立即消失。我不确定我做错了什么，但我在下面包含了第二个 jsfiddle，其中我设法用一些更简单的 html 实现了我想要的效果。

示例 1：https : //jsfiddle.net/ornbovv7/2/

示例 2：https : //jsfiddle.net/aou6j8gz/1/

我的代码：

.header {
  width:100%;
  height:100px;
  background-color:#fff;
}

.content {
  width:100%;
  height:500px;
  background-color:pink;
}

nav.main-menu ul {
  position:relative;
  top:30px;
  list-style:none;
}

nav.main-menu ul li {
  cursor:pointer;
  display:inline-block;
  margin:10px 30px 10px 30px;
  padding:0px 20px 45px 20px;
}

nav.main-menu ul ul {
  position:absolute; 
  left:-999em;
  width:175px;
  display:block; 
  height:auto;
  margin:40px 0px 0px 0px;
  padding:0;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
  background-color:#ffffff;
  opacity:0;

  transition: left 0s …

我已经构建了一个jsFiddle，它用Wordpress网站上的页面构建器插件构建的布局重新产生了我遇到的问题。共有五列，并且所有列都包含具有相同CSS类的相册封面。

当我将鼠标悬停在专辑封面上时，我希望子div通过过渡不透明度出现。当使用无序列表执行此操作时，我发现悬停伪类会自动选择正确的子级，但是我使用的jQuery的行为却有所不同，并选择具有相同CSS类的所有项，而不仅仅是该项的子级我盘旋了。

有没有一种方法可以使我所悬停的div和它的孩子（而不是所有孩子）受到影响？

https://jsfiddle.net/25pftxv3/

<div class="column">
    <div class="album-cover">
        <div class="album-cover-icon"></div>
    </div>
</div>

<div class="column">
    <div class="album-cover">
        <div class="album-cover-icon"></div>
    </div>
</div>

<div class="column">
    <div class="album-cover">
        <div class="album-cover-icon"></div>
    </div>
</div>

<div class="column">
    <div class="album-cover">
        <div class="album-cover-icon"></div>
    </div>
</div>

<div class="column">
    <div class="album-cover">
        <div class="album-cover-icon"></div>
    </div>
</div>



html,
body {
  height:100%;
}

.column {
  position:relative;
  float:left;
  width:18%;
  height:100%;
  margin:1%;
  overflow:hidden;
}

.album-cover {
  padding:60px 0 !important;
  background:pink;
}

.album-cover-icon {
  width:20px;
  height:20px;
  margin:0 auto;
  background:yellow;
  opacity:0;
  transition: all .5s;
}

.album-cover-icon.hover {
  opacity:1; …