响应式 CSS：组织图像问题答案

【问题标题】：Responsive CSS: Organizing images issue响应式 CSS：组织图像问题
【发布时间】：2015-11-16 15:44:15
【问题描述】：

我正在尝试对图像进行布局，以便在移动设备看到它们时将它们分成 2 列，而当更大的设备看到它们时，它们会分成 3 列。很简单。

但是，有一个问题。我的每张图片都有一个标题，有些比其他的长，因此（在移动视图中）当图像在 2 列中彼此下方时，图像可能会留下间隙，因为它上面的图像的标题会干扰用它（或其他东西）。

所以它应该是这样的：（其中 captn 表示标题）

[image]    [image]
[captn]    [captn]

[image]    [image]
[captn]    [captn]

但是，它看起来像这样：

[image]    [image]
[captn]    [captn]

           [image]
           [captn]
[image]
[captn]

因为第一张图片的标题稍长。

简单的解决方案是缩短第一张图片的标题，但我要保留细节。非常感谢您的帮助:)

我当前的代码：

部分 HTML：

<ul id="pictures">
      <li>
        <a href="img/blocks.jpg">
          <img src="img/blocks.jpg" alt="" />
          <p>THIS IS A LONG, LONG, LONG, LONG, LONG, LONG MESSAGE.......</p>
        </a>
      </li>
      <li>
        <a href="img/code.jpg">
          <img src="img/code.jpg" alt="" />
          <p>Beautiful code.</p>
        </a>
      </li>
      <li>
        <a href="img/skier.jpg">
          <img src="img/skier.jpg" alt="" />
          <p>Ski jumper.</p>
        </a>
      </li>
      <li>
        <a href="img/android.jpg">
          <img src="img/android.jpg" alt="" />
          <p>Android intelligence is powerful.</p>
        </a>
      </li>
      <li>
        <a href="img/woodland.jpg">
          <img src="img/woodland.jpg" alt="" />
          <p>An adventurous woodland.</p>
        </a>
      </li>
    </ul>

部分 CSS：

/*IMAGE STYLING*/

#pictures {
  margin: 0;
  padding: 0;
  list-style: none;
}

#pictures li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: black;
  color: white;
}

#pictures li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: white;
}

部分响应式 CSS：

@media screen and (min-width: 480px) {

/*TWO COLUMN LAYOUT*/

#primary {
    width: 50%;
    float: left;
}

#secondary {
    width: 40%;
    float: right;
}



/*Picture page*/

#pictures li {
    width: 28.3333%
}

#pictures li:nth-child(4n) {
    clear: left;
}

谢谢

【问题讨论】：

谢谢大家的回复！我设法找到了解决方案:)

标签： html css responsive-design

【解决方案1】：

通常你会从你正在做的事情中翻转响应，所以你为更大的屏幕设计并响应地处理更小的屏幕（最大宽度：480 像素而不是最小宽度：480 像素）。因为你已经这样做了，所以我假设你出于某种原因必须这样做。

将其添加到 CSS 的主要部分：

#pictures li:nth-child(odd) {
    clear: left;
}

然后将此添加到响应部分：

#pictures li:nth-child(odd) {
    clear: none;
}

这只是告诉它每隔一秒分裂一次。如果没有该指令，代码将不太确定如何处理较长的文本。简单但有效。

【讨论】：

【解决方案2】：

我能理解你的问题。由于字幕的大小不同，如您之前所述，可能会发生对齐问题。

你能做的是

将图片和标题包装在一个 div 中
给 div 一些最小高度（css 修复）
或者用这个方法（我推荐）

equalheight = function(container) {

  var currentTallest = 0,
    currentRowStart = 0,
    rowDivs = new Array(),
    $el,
    topPosition = 0;
  $(container).each(function() {

    $el = $(this);
    $($el).height('auto')
    topPostion = $el.position().top;

    if (currentRowStart != topPostion) {
      for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
        rowDivs[currentDiv].height(currentTallest);
      }
      rowDivs.length = 0; // empty the array
      currentRowStart = topPostion;
      currentTallest = $el.height();
      rowDivs.push($el);
    } else {
      rowDivs.push($el);
      currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
    }
    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
      rowDivs[currentDiv].height(currentTallest);
    }
  });
}
$(window).resize(function() { //to work in resize
  equalheight('li');
});

$(document).ready(function() {
  equalheight('li');
});

/*IMAGE STYLING*/

#pictures {
  margin: 0;
  padding: 0;
  list-style: none;
}
#pictures li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: black;
  color: white;
}
#pictures li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: white;
}
@media screen and (min-width: 480px) {
  /*TWO COLUMN LAYOUT*/
  #primary {
    width: 50%;
    float: left;
  }
  #secondary {
    width: 40%;
    float: right;
  }
  /*Picture page*/
  #pictures li {
    width: 28.3333%
  }
  #pictures li:nth-child(4n) {
    clear: left;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<ul id="pictures">
  <li>
    <a href="img/blocks.jpg">
      <img src="http://www.w3schools.com/tags/img_pulpit.jpg" alt="" />
      <p>THIS IS A LONG, LONG, LONG, LONG, LONG, LONG MESSAGE.......</p>
    </a>
  </li>
  <li>
    <a href="img/code.jpg">
      <img src="http://www.w3schools.com/tags/img_pulpit.jpg" alt="" />
      <p>Beautiful code.</p>
    </a>
  </li>
  <li>
    <a href="img/skier.jpg">
      <img src="http://www.w3schools.com/tags/img_pulpit.jpg" alt="" />
      <p>Ski jumper.</p>
    </a>
  </li>
  <li>
    <a href="img/android.jpg">
      <img src="http://www.w3schools.com/tags/img_pulpit.jpg" alt="" />
      <p>Android intelligence is powerful.</p>
    </a>
  </li>
  <li>
    <a href="img/woodland.jpg">
      <img src="http://www.w3schools.com/tags/img_pulpit.jpg" alt="" />
      <p>An adventurous woodland.</p>
    </a>
  </li>
</ul>

禁用js并尝试运行代码，会出现对齐问题。

【讨论】：

【解决方案3】：

试试这个：Equal Height of Columns

【讨论】：

【解决方案4】：

我想如果你将使用三个 Column 而不是浮动列表项浮动整个列表 ul 等宽（33.33% )，那么此过程可能会对您有所帮助。

如果您在移动视图中需要两列，那么只需将 ul 的宽度更改为 50%，所以现在第三列是问题所在，因为您可以为该列使用 100% 宽度，或者通过使用一些 JavaScript 技术，您可以将第三列的项目平均划分为其他两列。我现在不记得那个技术了，但是你可以用谷歌搜索一下，因为我是在谷歌创立的。

检查以下示例。

/*You don't have to use these JQuery, it is for demo purpose only, it creates different color for each 'li' */


$(document).ready(function() {
    var randomColors = ["black","yellow","red","blue","orange","pink","red","blue","black"];
    $(".item").each(function(index) {
        var len = randomColors.length;
        var randomNum = Math.floor(Math.random()*len);
        $(this).css("backgroundColor",randomColors[randomNum]);
        //Removes color from array so it can't be used again
        randomColors.splice(randomNum, 1);
    });
});

.col {
    float: left;
    width: 33.33%;
    margin: 0;
    padding: 0;
}

.item {
    padding: 5px;
    color: #fff;
    list-style-type: none;
}

.item span {
    background: orange;
    text-align: center;
    font-weight: bold; 
    display: block;
    width: 100%;
    padding: 5px 0;
}

.item img {
    width: 100%;
}


@media (max-width: 768px;){
    .col {
        width: 50%;
    }
    
    .third-col {
        float: none;
        width: 100%;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<ul class="col">
    <li class="item-1 item">
        <span>Caption 1</span>
        <img src="http://lorempixel.com/200/250/food/Dummy-Text/">
    </li>
    <li class="item-2 item">
        <span>Caption 2</span>
        <img src="http://lorempixel.com/200/200/people/Dummy-Text/">
    </li>
    <li class="item-3 item">
        <span>Caption 3</span>
        <img src="http://lorempixel.com/200/100/sports/Dummy-Text/">
    </li>
</ul>
<ul class="col">
    <li class="item-4 item">
        <span>Caption 4</span>
        <img src="http://lorempixel.com/200/120/sports/Dummy-Text/">
    </li>
    <li class="item-5 item">
        <span>Caption 5</span>
        <img src="http://lorempixel.com/200/280/sports/Dummy-Text/">
    </li>
    <li class="item-6 item">
        <span>Caption 6</span>
        <img src="http://lorempixel.com/200/150/sports/Dummy-Text/">
    </li>
</ul>
<ul class="col third-col">
    <li class="item-7 item">
        <span>Caption 7</span>
        <img src="http://lorempixel.com/200/190/sports/Dummy-Text/">
    </li>
    <li class="item-8 item">
        <span>Caption 8</span>
        <img src="http://lorempixel.com/200/150/sports/Dummy-Text/">
    </li>
    <li class="item-9 item">
        <span>Caption 9</span>
        <img src="http://lorempixel.com/200/210/sports/Dummy-Text/">
    </li>    
</ul>

【讨论】：