相关疑难解决方法(0)

下面的图表适用于Chrome和Firefox,但Safari正在缩小框的宽度.这也发生在移动客户端上.我包括图表容器的css和完整标记和css的codepen.

https://codepen.io/juancho1/pen/akyNmp

#chart-container{
  width: 100%;
  height: auto;
  border: 1px solid #39c3ec;
  /*display: -webkit-box;*/
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  overflow-x: scroll !important;
}

我希望有人之前遇到过这个具体问题.在寻找可能的解决方案时,我看到Safari在flexbox方面存在一些问题,并尝试了我见过的大部分解决方案.它也可能与弯曲方向有关.

我很感激任何人可能有的提示!谢谢

我正在构建 100% 高度的应用程序侧边栏，需要滚动并在最底部保留一些链接。我的解决方案在 Chrome 中完美运行，但在 Safari 中存在重叠问题。

基本的部分看起来像这样：

position: fixed;
left: 0;
min-height: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
width: 180px;
justify-content: flex-start;
overflow-y: scroll

在这里查看 Codepen：

http://codepen.io/jackmcdade/pen/PZveXo?editors=1100

任何帮助或见解表示赞赏！我担心这可能是这个Webkit Bug

是否有一种方法用纯css使2个div占用50%的宽度,然后设置一个css属性,如display:none在其中一个 div上,导致另一个占用100%的宽度？

我正在寻找一个解决方案,我只需要在其中一个元素上更改css,以占用剩下的空间.

在CSS中有什么方法可以创建它:

-----------------------------------
| lorem ipsum dolor | consectetur |
| sit amet          |             |
-----------------------------------
| adipiscing        | elit        |
-----------------------------------

由此:

<ul>
  <li>lorem ipsum dolor sit amet</li>
  <li>consectetur</li>
  <li>adipiscing</li>
  <li>elit</li>
</ul>

^{(元素的顺序并不重要)}

UPDATE

我需要'列'和它们最宽的'细胞'一样宽; 我需要'行'和最高的'细胞'一样高; 总之...一张桌子!没有"表头":所有单元格在同一级别上,分层次.

更新2

类似于:第一个虚拟行上的每个单元格(即行换行前的每个单元格)根据其内容填充所有可用空间; 随后的行由与第一行相同的每行单元数形成.每列仍然与其最宽的单元格一样宽,而不增加第一行建立的列数.

想想更多关于它的东西,那里的东西需要比桌面布局模块更多的魔法,这太开始了!

一张图片,说千言万语:

^{(你可以忽略'细胞'里面的无序列表)}

如何只用一个简单的HTML列表来实现它.在这一点上,我猜测的是:你不会 ; 但是让我们看看......

我有一个div使用flexbox来集中它的项目.在这里div我有3个元素,其中一个是图像.

<div id="flex-container">
    <div id="container1"></div>
    <img src="#" alt="">
    <div id="container2"></div>
</div>

#container1并且#container2有自己的高度,img应该使用里面的剩余高度#flex-container.

此代码段适用于Firefox,但在Chrome中不起作用.(jsfiddle)

#flex-container{
  height: 300px;
  width: 500px;
  display: flex;
  display: -webkit-flex;
  flex-flow: column nowrap;
  -webkit-flex-flow: column nowrap;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  border: 5px solid black;
}

#container1, #container2{
  height: 100px;
  width: 300px;
  background: orange;
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}

<div id="flex-container">

  <div …

我的网站有一个部分，我在 2 个 div 和一个a标签上使用下面的 CSS ，以便使内容在中心垂直对齐。

问题在于，对于 flex 样式属性，当窗口小于 768px 时，理想情况下，内容会改变布局，并且每个内容col-md-4都会堆叠在一起。

这并没有发生，相反，这些列变得非常细小并且仍然并排显示。有没有什么办法解决这一问题？最好尽量远离表格单元格格式

.about-us-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-us-nav a {
    font-size: 20px;
    color: #52361D;
    background-color: #885A31;
    border-color: #52361D;
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-help-container {
    margin-top: -25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    z-index: 2;
}

我在Safari，IE11和IE10中的嵌套Flexbox遇到了一些问题。面板应该是并排的（宽度为50％），并且其中的内容物含量不同。该<cite>元件应锚定到面板的底部和每个面板应该是相同的高度。

这是一个codepen来说明：http ://codepen.io/anon/pen/BKNRBY

在Chrome / Firefox中，此方法工作正常，但在Safari，IE10和IE11中，面板不会垂直拉伸以包含其内容。

谁能提供任何建议？

我正在使用通常被称为类的类将我的内容在flex容器内水平和垂直居中。它适用于所有现代浏览器，但是即使是相当新的Internet Explorer版本也给我带来麻烦。

这是我标记的相关部分，充分利用了Bootstrap的嵌入响应类来保持比率。

HTML：

<div class="container-fluid embed-responsive embed-responsive-16by9" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%), url('http://placehold.it/800X600') no-repeat;background-size:cover;background-position:center">
  <div class="content-center">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 text-center">
          <button id="play-video" type="button" class="btn btn-default" data-toggle="modal" data-target="#video-modal" data-youtube="scWpXEYZEGk">
            Play
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.content-center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: …

我正在尝试创建一个带有三个内部内联元素的全角横幅。反向链接、徽标和正向链接。

我还想使用相同的代码创建一个带有两个内部内联元素的全角横幅。左后链接和中央徽标。

到目前为止我所拥有的是：

超文本标记语言

 <section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="header-right"><p>3</p><p>3</p></div>
    <div class="clearfix"></div>
  </div>
</section>

社会保障体系：

#header-blue {
  width: 100%;
  margin-bottom: 50px;
  height: auto;
  background-color: $primary-blue;
  color: #fff;

  #header-wrap {
    text-align: center;
    border: 1px solid green;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    div {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .header-left {
    float: left;
    border: 1px solid red;
    width: 100px;
  }
  .header-right {
    float: right;
    border: 1px solid red;
    width: 100px;
  }
  .header-center {
    border: 1px solid …

我想在下面绘制的排列中布置一些 div。它是两个并排的方形块，然后是垂直排列的 2 个半高块，其中第三个大块可能适合。

+---------+ +---------+ +---------+ 
| BOX1    | | BOX2    | | BOX3    |
|         | |         | +---------+
|         | |         | +---------+
|         | |         | | BOX4    |
+---------+ +---------+ +---------+

到目前为止，我已经接近的唯一方法是创建 3 个左浮动框并将两个较小的框放在第三个浮动框中。这对我来说感觉不对。就像，我添加额外的 div 只是为了控制布局。也许那没问题，但感觉不对。

在这里看到它：

https://jsfiddle.net/a84kv4wo/1/

+---------+ +---------+ +---------+ 
| BOX1    | | BOX2    | | BOX3    |
|         | |         | +---------+
|         | |         | +---------+
|         | |         | | BOX4    |
+---------+ +---------+ +---------+

.big_box {
  height: 8em;
  width: …

我试图在我的网站中实现灵活的盒子模型,虽然它的工作为-webkit浏览器,如chrome和safari,其他浏览器,如mozilla和opera,我似乎无法让它在Internet Explorer中工作,无论我是什么做.下面是我的Css样式表文件的简短片段,其中包含我的.holder类,其中包含所有内容,而我的#new_div id是.holder的子项,并且包含我的帖子和侧边栏的主要部分.

.holder
{
    width:100%;
    margin:auto;
    display:-webkit-box;
    display:-o-box;
    display:-ms-box;
    display:-box;
    display:-pie;
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    -o-box-orient:vertical;
    -ms-box-orient:vertical;
    -box-orient:vertical;
    -pie-box-orient:vertical;
    -moz-box-flex:1;    /* Firefox, seamonkey etc */
    -o-box-flex:1;      /* Opera */
    -ms-box-flex:1;     /* MSIE */
    -box-flex:1;         /* Any that support full implementation */
    -pie-box-flex:1;
    -webkit-box-flex:1;
    -webkit-box-pack:center;
    -o-box-pack:center;
    -ms-box-pack:center;
    -pie-box-pack:center;
    -box-pack:center; 
    text-align:center;
    behavior: url(../../Content/pie/PIE.htc);
}

.holder #new_div
{
    width:940px;
}
.holder div
{
    -webkit-box-pack:center;
    -o-box-pack:center;
    -ms-box-pack:center;
    -box-pack:center; 
    -pie-box-pack:center;
    behavior: url(../../Content/pie/PIE.htc);
}
#new_div
{
    margin:auto;
    display:-webkit-box;
    display:-moz-box;
    display:-o-box;
    display:-ms-box;
    display:-box;
    display:-pie-box;
    text-align:left;
    -webkit-box-flex:1;
    -moz-box-flex:1;    /* …

我学到的解决方案之一是display将父div元素设置为table-cell并使用该vertical-align属性.

虽然这有效,但在我的情况下,我还需要父div来向右浮动,但它打破了表格细胞技巧,现在整个事情都不起作用.

所以我的问题很简单:为什么会发生这种情况,更重要的是,我怎样才能达到我想要的效果呢？

div {
    /* float: right;  uncomment this will make this not working */
    display: table-cell;
    vertical-align: middle;
    height: 60px;
    border: 1px solid red;
}

<div>
  <input>
</div>

相应的JSFiddle