Question

我有一个布局，我试图添加一排图像，这些图像将位于＆＃39;刚刚到达的位置下方。部分，无论我尝试什么图像保持在彼此之下流动。

谁能看到我做错了什么？谢谢！

Answer 1

这是因为<li>元素默认为display: block。给他们float: left，然后你就可以了。

.wrap {
  float: left;
}

Answer 2

它们在彼此之下流动，因为每个图像都包含一个块元素，在本例中为<div>。删除div或将其显示值设置为inline-block。

较小的图片的显示值均为list-item，这些图像也将项目定位为垂直列表。

<强>内联块

＆＃13;

.wrapper {
  text-align: left;  
}

.wrapper a {
  display: inline-block;  
}

＆＃13;

<div class="wrapper">
    <a href="#">
      <img src="http://placehold.it/300x200" alt="">
    </a>
    <a href="#">
      <img src="http://placehold.it/300x200" alt="">
    </a>
    <a href="#">
      <img src="http://placehold.it/300x200" alt="">
    </a>
    <a href="#">
      <img src="http://placehold.it/300x200" alt="">
    </a>
</div>

＆＃13;

显示块和花车

＆＃13;

/* Clearfix */
.wrapper::after {
  content: ''
  clear: both;
  display: table;
}

.wrapper a {
  display: block;
  float: left;
}

img {
  /* Fixes whitespace below each image */
  display: block;
}

＆＃13;

<div class="wrapper">
    <a href="#">
      <img src="http://placehold.it/300x200" alt="">
    </a>
    <a href="#">
      <img src="http://placehold.it/300x200" alt="">
    </a>
    <a href="#">
      <img src="http://placehold.it/300x200" alt="">
    </a>
    <a href="#">
      <img src="http://placehold.it/300x200" alt="">
    </a>
</div>

＆＃13;

<强> Flexbox的

如果您不需要支持旧版本的Internet Explorer（＆lt; 11），请使用此功能。

＆＃13;

/* Clearfix */
.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper a {
  width: 50%;
}

img {
  /* Stretch the image for demo purposes */
  width: 100%;
  /* Fixes whitespace below each image */
  display: block;
}

＆＃13;

<div class="wrapper">
    <a href="#">
      <img src="http://placehold.it/300x200" alt="">
    </a>
    <a href="#">
      <img src="http://placehold.it/300x200" alt="">
    </a>
    <a href="#">
      <img src="http://placehold.it/300x200" alt="">
    </a>
    <a href="#">
      <img src="http://placehold.it/300x200" alt="">
    </a>
</div>

＆＃13;

Answer 3

我为你写了一个小代码。检查一下。

＆＃13;

p2

＆＃13;

但是我使用了小jquery。您可以更改条件，我在内部使用了所有<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> </head> <style type="text/css"> body{ margin: 0; padding: 0; height: auto; } div.imagecontainer { width: 100%; height: auto; } div.imagecontainer ul { width: 100%; height: 100%; padding:0; } div.imagecontainer ul li{ list-style-type: none; width: 20%; height: 200px; float: left; } div.imagecontainer ul li img { width: 100%; height: 100%; } </style> <body> <div class="imagecontainer"> <ul> <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li> <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li> <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-Blaithin_f3f568d3-849a-4271-a640-b2517965adda.jpg?16480572688008041262"></li> <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li> <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li> </ul> </div> <script type="text/javascript"> $(window).resize(function(){ //alert("resizing"); var windowWidth = $(window).width(); if(windowWidth < 600) { $("div.imagecontainer ul li").css({"width":"100%","height":"400px"}); } else { $("div.imagecontainer ul li").css({"width":"20%","height":"200px"}); } }); </script> </body> </html> ans css。

其他的事情是js和width，其他因素取决于您的需求会根据需要更改那些（您决定放入一行的图片数量）。

我认为这可能不是100％适合您的需要。我建议使用bootstrap。复制过去并尝试this.hope这将对你有所帮助。

响应式图像无法正常流动

3 个答案: