Question

我使用的很好＆amp;使用此示例https://tympanus.net/codrops/2013/04/17/responsive-full-width-grid/

清理响应式网格的CSS

这非常适合显示图库图像并固定标题，但是当我使用标题的长度不同时，它会破坏设计。以下示例。

.cbp-rfgrid {
    margin: 35px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
}

.cbp-rfgrid li {
    position: relative;
    float: left;
    overflow: hidden;
    width: 16.6666667%; /* Fallback */
    width: -webkit-calc(100% / 6);
    width: calc(100% / 6);
}

.cbp-rfgrid li a,
.cbp-rfgrid li a img {
    display: block;
    width: 100%;
    cursor: pointer;
}

.cbp-rfgrid li a img {
    max-width: 100%;
}

/* Flexbox is used for centering the heading */
.cbp-rfgrid li a div {
    left: 20px;
    top: 20px;
    right: 20px;
    bottom: 20px;
    background: rgba(71,163,218,0.2);

    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    text-align: center;
    opacity: 1;
  position:relative;
  background-color:red;
  padding:5px;
}

.cbp-rfgrid li a:hover div {
    opacity: 1;
}

.cbp-rfgrid li a div h3 {
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.4em;
    letter-spacing: 2px;
    padding: 0 10px;
}

/* Example for media query: change number of items per row */

@media screen and (max-width: 1190px) {
    .cbp-rfgrid li {
        width: 20%; /* Fallback */
        width: -webkit-calc(100% / 5);
        width: calc(100% / 5);
    }
}

@media screen and (max-width: 945px) {
    .cbp-rfgrid li {
        width: 25%; /* Fallback */
        width: -webkit-calc(100% / 4);
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 660px) {
    .cbp-rfgrid li {
        width: 33.3333333%; /* Fallback */
        width: -webkit-calc(100% / 3);
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 660px) {
    .cbp-rfgrid li {
        width: 33.3333333%; /* Fallback */
        width: -webkit-calc(100% / 3);
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 400px) {
    .cbp-rfgrid li {
        width: 50%; /* Fallback */
        width: -webkit-calc(100% / 2);
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 300px) {
    .cbp-rfgrid li {
        width: 100%;
    }
}

如何对齐行以使设计不会中断

Answer 1

我们可以使用css属性作为网格的父级，display：flex; How do I keep two divs that are side by side the same height?

ul.cbp-rfgrid {
  display: flex;
}

Answer 2

似乎有些风格没有做任何事情，或者正在阻碍。

我会简化你的CSS ...

.cbp-rfgrid li a div {
  background: rgba(71,163,218,0.2);
  opacity: 1;
  background-color: red;
  padding: 5px;
  margin: 5px;
}

.cbp-rfgrid li a div h3 {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.4em;
  letter-spacing: 2px;
  padding: 0 10px;
}

DEMO

Answer 3

只需使用此div的位置即可。你可以改变div的偏移量，把它放在你想要的地方。

.cbp-rfgrid li a div {
    left: 20px;
    right: 20px;
    bottom: 0;
    background: rgba(71,163,218,0.2);
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    text-align: center;
    opacity: 1;
    position: absolute;
    background-color: red;
    padding: 5px;
}

并为此

添加亲戚

.cbp-rfgrid li a {
    display: block;
    width: 100%;
    cursor: pointer;
    position: relative;
}

Answer 4

您需要以其他方式替换float。以下是两种可能的变体：

方法＃01：

使用css3 flexbox：

  .cbp-rfgrid {
    /* Following properties should be added on parent element */
    flex-wrap: wrap;
    display: flex;
  }

.cbp-rfgrid {
  margin: 35px 0 0 0;
  padding: 0;
  list-style: none;
  position: relative;
  flex-wrap: wrap;
  display: flex;
}

.cbp-rfgrid li {
  position: relative;
  float: left;
  overflow: hidden;
  width: 16.6666667%; /* Fallback */
  width: -webkit-calc(100% / 6);
  width: calc(100% / 6);
}

.cbp-rfgrid li a,
.cbp-rfgrid li a img {
  display: block;
  width: 100%;
  cursor: pointer;
}

.cbp-rfgrid li a img {
  max-width: 100%;
}

/* Flexbox is used for centering the heading */
.cbp-rfgrid li a div {
  background: rgba(71,163,218,0.2);
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  text-align: center;
  opacity: 1;
  position:relative;
  background-color:red;
  padding: 5px;
  margin: 0 10px;
}

.cbp-rfgrid li a:hover div {
  opacity: 1;
}

.cbp-rfgrid li a div h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.4em;
  letter-spacing: 2px;
  padding: 0 10px;
}

/* Example for media query: change number of items per row */

@media screen and (max-width: 1190px) {
  .cbp-rfgrid li {
    width: 20%; /* Fallback */
    width: -webkit-calc(100% / 5);
    width: calc(100% / 5);
  }
}

@media screen and (max-width: 945px) {
  .cbp-rfgrid li {
    width: 25%; /* Fallback */
    width: -webkit-calc(100% / 4);
    width: calc(100% / 4);
  }
}

@media screen and (max-width: 660px) {
  .cbp-rfgrid li {
    width: 33.3333333%; /* Fallback */
    width: -webkit-calc(100% / 3);
    width: calc(100% / 3);
  }
}

@media screen and (max-width: 660px) {
  .cbp-rfgrid li {
    width: 33.3333333%; /* Fallback */
    width: -webkit-calc(100% / 3);
    width: calc(100% / 3);
  }
}

@media screen and (max-width: 400px) {
  .cbp-rfgrid li {
    width: 50%; /* Fallback */
    width: -webkit-calc(100% / 2);
    width: calc(100% / 2);
  }
}

@media screen and (max-width: 300px) {
  .cbp-rfgrid li {
    width: 100%;
  }
}

<ul class="cbp-rfgrid">
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>This is the long title</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <!-- ... -->
</ul>

方法＃01：

使用display: inline-block代替float：

.cbp-rfgrid {
  /* Following properties will remove the extra spaced created by display: inline-block */
  letter-spacing: -4px;
  font-size: 0; 
}
.cbp-rfgrid li {
  display: inline-block;
  vertical-align: top;

  /* Overriding properties to the normal values */
  letter-spacing: 0;
  font-size: 14px;
}

.cbp-rfgrid {
  margin: 35px 0 0 0;
  padding: 0;
  list-style: none;
  position: relative;
  letter-spacing: 0;
  font-size: 0;
}

.cbp-rfgrid li {
  display: inline-block;
  vertical-align: top;
  position: relative;
  letter-spacing: 0;
  font-size: 14px;
  overflow: hidden;
  width: 16.6666667%; /* Fallback */
  width: -webkit-calc(100% / 6);
  width: calc(100% / 6);
}

.cbp-rfgrid li a,
.cbp-rfgrid li a img {
  display: block;
  width: 100%;
  cursor: pointer;
}

.cbp-rfgrid li a img {
  max-width: 100%;
}

/* Flexbox is used for centering the heading */
.cbp-rfgrid li a div {
  background: rgba(71,163,218,0.2);
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  text-align: center;
  opacity: 1;
  position:relative;
  background-color:red;
  padding: 5px;
  margin: 0 10px;
}

.cbp-rfgrid li a:hover div {
  opacity: 1;
}

.cbp-rfgrid li a div h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.4em;
  letter-spacing: 2px;
  padding: 0 10px;
}

/* Example for media query: change number of items per row */

@media screen and (max-width: 1190px) {
  .cbp-rfgrid li {
    width: 20%; /* Fallback */
    width: -webkit-calc(100% / 5);
    width: calc(100% / 5);
  }
}

@media screen and (max-width: 945px) {
  .cbp-rfgrid li {
    width: 25%; /* Fallback */
    width: -webkit-calc(100% / 4);
    width: calc(100% / 4);
  }
}

@media screen and (max-width: 660px) {
  .cbp-rfgrid li {
    width: 33.3333333%; /* Fallback */
    width: -webkit-calc(100% / 3);
    width: calc(100% / 3);
  }
}

@media screen and (max-width: 660px) {
  .cbp-rfgrid li {
    width: 33.3333333%; /* Fallback */
    width: -webkit-calc(100% / 3);
    width: calc(100% / 3);
  }
}

@media screen and (max-width: 400px) {
  .cbp-rfgrid li {
    width: 50%; /* Fallback */
    width: -webkit-calc(100% / 2);
    width: calc(100% / 2);
  }
}

@media screen and (max-width: 300px) {
  .cbp-rfgrid li {
    width: 100%;
  }
}

<ul class="cbp-rfgrid">
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>This is the long title</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://tympanus.net/Blueprints/ResponsiveFullWidthGrid/images/cat.jpg" />
      <div>
        <h3>Felis catus</h3></div>
    </a>
  </li>
  <!-- ... -->
</ul>

Answer 5

我认为一个好的，通用的解决方案需要适应任何长度的标题。这是一个使用CSS截断标题并添加省略号的解决方案，如果它不适合空格：
http://codepen.io/panchroma/pen/WomEeK

我编辑的代码是

.cbp-rfgrid li a div h3 {
  width: 95%;  /* I've lowered this from 100% to make room for the ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 6

此解决方案不是基于CSS或HTML，而是我使用jQuery作为替代

window.onload = function () {
    var heights = $(".bod-title-w").map(function ()
    {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);
   // alert(maxHeight);
    $(".bod-title-w").css("min-height", maxHeight+15);
    setTimeout(function () {
      //  $(".bod-title-w").css("min-height", maxHeight);
    }, 1000);
};

我找到了具有最大高度和最大值的div为所有div或包装器分配相同的

长标题打破了响应式屏幕上的网格设计

6 个答案: