响应式CSS：组织图像问题

时间：2015-11-16 00:58:00

标签： html css responsive-design

我试图布置我的图片，以便当移动设备看到它们时，它们被分成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;
}

谢谢

4 个答案:

答案 0 :(得分：0)

我能理解你的问题。由于字幕大小不同，因此您可能会在早期描述时发生对齐问题。

您可以做的是

  1. 将图像和标题换行为div

  2. 给div一些最小高度（css fix）

  3. 或使用此方法（我推荐）

    4. 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并尝试运行代码，将发生对齐问题。

答案 1 :(得分：0)

试试这个：Equal Height of Columns

答案 2 :(得分：0)

我认为如果您将使用三个列而不是浮动列表项浮动整个列表 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>

答案 3 :(得分：0)

通常情况下，您可以根据自己的动作来完成响应，因此您可以设计更大的屏幕并响应性地处理较小的屏幕（最大宽度：480像素而不是最小宽度：480像素）。因为你已经以这种方式做到了，所以我认为你必须出于某种原因。

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

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

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

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

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

相关问题
最新问题