相关疑难解决方法(0)

因此，使用网格时，当我没有align-items: center;img时，align-items: center;它可以正常显示，但是一旦添加，它就会突然消失。是什么导致此问题？

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100px;
}

img {
  display: block;
  max-height: 100%;
  margin: 0 auto;
}

.align {
  align-items: center;
}

<div class="grid">
  <div>
    <span>text</span>
  </div>
  <div>
    <img src="http://via.placeholder.com/650x1050" />
  </div>
</div>

<div class="grid align">
  <div>
    <span>text</span>
  </div>
  <div>
    <img src="http://via.placeholder.com/650x1050" />
  </div>
</div>

这似乎是Chrome问题。它也不适用于Firefox上的img。

我正在构建一种后网格滑块，它将在CSS网格中显示4个框。我构建了所有内容，并且它按预期工作，但在Firefox中不起作用。

Firefox和Safari都无法显示网格高度。它们导致0或1px。为了解决这个问题，我使用display：flex和flex-flow设置为换行。这在Safari中有效，但在Firefox中无效。当我从容器中删除flex时，它可以在Firefox中运行，但随后不能在Safari中运行。

Edge和Chrome都可以。我迷失在寻找解决方案并尝试解决它的问题，但结果仍然相同。

我正在使用padding-top和position absolute来具有“按比例”响应的网格及其项目。

谢谢您的回复。 https://codepen.io/Mariopa/pen/ELjqYr

的HTML

<div class="post-grid-slider">
  <div class="post-grid-wrapper">
    <div class="post-grid">
      <div class="post-grid__item">
        <a href="#" target="_self" rel="nofollow" class="post-grid__link">  
         <div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/Inoutic-1024x683)"></div>          
          <div class="subcategory"><span >Category</span></div>
          <h2 class="post-grid__title">Title</h2>
        </a>
      </div>
      <div class="post-grid__item">
        <a href="#" target="_self" rel="nofollow" class="post-grid__link">  
          <div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/kinds-of-food-3320746_1920-1024x683)"></div>         
          <div class="subcategory"><span>Category</span></div>
          <h2 class="post-grid__title">Title</h2>
        </a>
      </div>
      <div class="post-grid__item">
        <a href="#" target="_self" rel="nofollow" class="post-grid__link">  
          <div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/leaf-397870_1920-1024x768)"></div>  
          <div class="subcategory"><span>Category</span></div>
          <h2 class="post-grid__title">Title</h2>
        </a>
      </div>
      <div class="post-grid__item">
         <a href="#" target="_self" rel="nofollow" class="post-grid__link">  
           <div class="post-grid__thumbnail" style="background-image:url(http://patlevic.sk/demopic/grape-hyacinth-1024x679)"></div>          
          <div class="subcategory"><span>Category</span></div>
          <h2 class="post-grid__title">Title</h2>
        </a>
      </div>
    </div> …

我甚至不知道这是否可以使用CSS,但我不得不问.

请相应地在提供答案之前阅读规范.谢谢!

我的加价:

<div class="wrapper">
    <img src="http://placehold.it/350x150">
    <p>Some text random size</p>
</div>

显然,.wrapper将具有我的img元素的高度,如果这是一个块.然后,我需要p元素在包装器内水平和垂直居中.我没有p元素的固定宽度或高度.

因此,无论段落大小甚至图像大小,都应该垂直和水平对齐,如http://i.imgur.com/phiR48H.png或http://i.imgur.com/Xvdt42j.png所示.

如果我在段落上设置绝对位置,它将不会垂直对齐,因为如果我不知道段落高度,我不能设置负边距.我在想桌子和桌子(vertical-align:middle;),但我只有1个单元格.有什么想法吗？

添加小提琴:http://jsfiddle.net/f3x7977z/

所提供的解决方案具有向后兼容性非常重要,特别是在IE8 +中.

为了最终结果,我们欢迎任何关于额外包装的建议!

蓝色框应该是100%的高度.当我设置像素高度时,它可以工作div.a,但不幸的是,这不是现实世界案例的选项.

这可能解释了一切:http: //codepen.io/anon/pen/jrVEpB

.a{
  background-color:red;
  display:flex;
}
.b1{
  flex-grow:0;
  background-color:green;
}
.b2{
  flex-grow:1;
  background-color:yellow;
  height:100%;
}

.c{
  height:100%;
  background-color:blue;
}

<div class="a">
  <div class="b1">
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    <p>hurr durr</p>
    
  </div>
  <div class="b2">
      <div class="c">
          miksi et ole full height saatana
      </div>
  </div>
</div>

在mdn

• flex:1

与...相同

• flex-grow:1。

但是，实际上它在浏览器中有不同的显示。

您可以通过更改CSS中的注释在jsFiddle中进行尝试。

当我使用flex: 1元素时，其类test-container名将是，height:100%但使用时不会发生flex-grow: 1。

我不明白为什么。寻求帮助。非常感谢。

.flex-1 {
  display: flex;
  flex-direction: column;
  height: 500px;
  background: red;
}

.child-1 {
  height: 50px;
  background: blue;
}

.child-2 {
  flex-grow: 1;
  /* flex:1; */
  background: green;
}

.test-container {
  display: flex;
  flex-direction: row;
  background: white;
  height: 100%;
}

<div class="flex-1">
  <div class="child-1"></div>
  <div class="child-2">
    <div class="test-container"></div>
  </div>
</div>

考虑以下页面，该页面显示一行文本，<textarea>其下方带有 。

* {
  box-sizing: border-box;
}

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

.outer {
  background-color: #eee;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
}

.expand {
  flex-grow: 1;
}

textarea {
  height: 100%;
  width: 100%;
}

<div class="outer">
  <p>
    Nice little wall of text.
  </p>
  <div class="expand">
    <textarea></textarea>
  </div>
</div>

预期的行为是让文本区域占据文本行下方页面的剩余高度。使用flexbox，我可以使.expand元素占据页面的剩余高度。然而，尽管已height: 100%;设置在文本区域上，但它拒绝占据其父级的完整高度。

为什么这不起作用以及如何使文本区域填充其父级？

我正在尝试创建一个没有固定高度父级的滚动元素。我希望#SECTION1我的代码可以滚动以显示其余的图像。我似乎找不到办法做到这一点。我试图设置#SECTION1一个固定的高度，但它迫使我的图像被压扁。任何帮助，将不胜感激。谢谢你。

这是我的代码：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

 ::-webkit-scrollbar {
  width: 15px;
}


/* Track */

::-webkit-scrollbar-track {
  background: #f1f1f1;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: #888;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
}


/*----------SECTION 1----------*/

header {
  height: 80px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#header-wrapper {
  display: …

searchResults我正在寻找一种方法，当我将大小调整为 时，将 div 的高度设置为 100% col-xs-12。当searchFilterdiv 缩小到时col-xs-12，我将其隐藏并将其高度设置为 20%。它下面的 div 的searchResults高度为 80%，当我调整大小时，col-xs-12我想将其高度更改为 100%。

我在我的 css 中尝试了这个，但它不起作用。

.searchResults .col-xs-12 {
    height: 100%;
}

我也尝试过

.searchResults > .col-xs-12 {
    height: 100%;
}

这是我的 html 和 css

.searchResults .col-xs-12 {
    height: 100%;
}

.searchResults > .col-xs-12 {
    height: 100%;
}

我正在尝试使用flexbox将div放在网页上.我正在设置以下CSS属性.我看到它是水平居中,但不是垂直居中.

.flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

这是小提琴:JSFIDDLE

你能解释一下我做错了什么吗？

什么我遇到的是，图像会被坐在虽然CSS是说应该坐在股利的方式过分max-height的700。

任何帮助表示赞赏

#largephotohold {
  border: 0px black solid;
  position: fixed;
  bottom: 0px;
  width: 90%;
  margin-left: 5%;
  background-color: white;
  text-align: center;
  border: 3px solid red;
  max-height: 700px;
}

#largephotohold IMG {
  max-height: 100%;
  max-width: 100%;
}

<DIV id="largephotohold">
<img src="http://i.imgur.com/AUn1uj6.jpg">
</DIV>

https://jsfiddle.net/e8nx0cto/

I can get the div to move to the correct column but not the correct row.

This will display the blue rectangle in the correct column, but for whatever reason it isn't moving in to the row I need it to. Thank you all for your help.

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 10% 80% 10%;
}

#navigation {
  grid-column: 2/2;
  grid-row: 2/2;
  height: 400px;
  width: 100%;
  background-color: blue;
}

<div id="navigation"></div>
<div id="menunBar"></div>
<div id="mainContent"></div>

我正在尝试calc()用于我的CSS.我创建了一个简单的小提琴,我有两个div.一个人有一个风格使用的类calc().但它没有任何效果.Div的高度没有变化.

.cont {
  height: calc(100% - 20px);
}

<div class="cont" style="background-color:blue">fsdfds</div>
<div style="background-color:red">1234</div>

小提琴

感谢帮助.

我正在学习 css-grid 并且在使用网格区域和百分比大小的行/列时遇到了跨浏览器（Firefox 和 Chrome）渲染差异。在此处查看我对此问题的演示：https : //codepen.io/anon/pen/qQyKNO

请参阅下面包含 HTML/CSS 的 MVCE：

/* CSS Reset */
html 
{
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust:     100%;
}
body { margin: 0; }
.p1  { padding: 1rem; }
img  { display: block; border: 0; width: 100%; height: auto; }

/* General Styles */
.navbar       { background: white; border-bottom: 1px solid black; }
.logo         { background: #212121;}
.sidebar      { background: #212121; color: white; }
.main-content { background: white; }
.colophon     { background: #1c1e1e; color: …