Question

我想在一行上有三个图像，如果这三个图像的总宽度不适合浏览器窗口，则所有三个图像应该在彼此之下。所以它全部或者全部没有＆＃34;，永远不应该只有两个图像彼此相邻而下面一个（这会发生，然后你会在所有三个图像上使用float:left;逐渐减少浏览器窗口宽度）

无论窗口大小如何，所有这些都应该在浏览器窗口中居中。

我知道有限的CSS和HTML，但我使用以下代码来获取窗口中的当前数据：

＆＃13;

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;	
}

table {
  vertical-align: middle;
  height: 100%;
  margin: 0 auto;
}

＆＃13;

<table>
  <tr>
    <td>
      <table width="280" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            "images and text"
          </td>
        </tr>
      </table> 
    </td>
  </tr>
</table>

＆＃13;

Answer 1

您可以使用媒体查询（简单+纯CSS），但您需要设置断点（不灵活）：

img{display:inline;}
//replace 1024 with width of all three images
@media (max-width:1024px){
    img{display:inline-block;}
}

或者你可以使用js（灵活+复杂）：

<script>
body.onresize=function(){
    var width=0;
    images=document.getElementsByTagName("image");
   for(image in images){
   width=width+image.width;
   }
   if(width>window.innerWidth){
      document.all.img.style.display="inline-block";
  }
  }
  </script>

Answer 2

我们只能使用纯CSS来解决这个问题，我们将使用CSS媒体查询。我将尝试借助示例来解释解决方案。为此，首先你应该拥有每张图片的宽度。

例如，我们假设您想要的一张图片的宽度是200px，那么您也希望在图像之间留出一些空间作为边距，所以让我们说如果浏览器宽度超过700px，那么我们将在同一行上拥有图像，否则，我们会将它们一个放在另一个之下。有关此类实现，请参阅下面的代码。

HTML可以是这样的：

<div class="container">
  <img src="img/one.jpg">
  <img src="img/two.jpg">
  <img src="img/tri.jpg">
</div>

CSS代码如下：

.container
{
  width:100%;
  text-align:center;
}
.container img
{
  display:inline-block;
  width:200px;
  margin:15px;
}

/*Next block will be followed when browser width is less than 700px*/
@media screen and (max-width:700px)
{
  .container img
  {
    display:block;
    margin:auto;
    width:100%;  /*Use this line only if you want the image to occupy full width*/
  }
}

Answer 3

您可以使用bootstrap来实现这一目标。单击“整页”按钮并更改屏幕大小。

@media (min-width:768px) {
	
	.inline-block-row .col-sm-4 {
	    display: inline-block;
        float:none;
	}
}

<body>
  
<div class="container-fluid">
   <h1>Inline Block Grid</h1>
   <div class="row inline-block-row">
      <div class="col-sm-4 col-md-3">
          <div class="well"><img class="thumbnail img-responsive" src="http://placehold.it/200x200"></div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"><img class="thumbnail img-responsive" src="http://placehold.it/200x200"></div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"><img class="thumbnail img-responsive" src="http://placehold.it/200x200"></div>
      </div>
     
   </div>
</div>  

</body>

Answer 4

如果您知道图片的宽度，则可以添加@media查询，该查询会将width容器和flex-direction从row更改为{{1} }}

例如：获取column中包含的img - 并且所有div都集中在divs中。< / p>

如果图片的宽度为section，且边距为240px（两边），则包含图片的20px边框为div两边）和2px边距（两边），然后......

包含三个24px的{{1}}的宽度为：

3 *（section + divs + 24px + 2px + 20px + 240px + 20px）= { {1}}

如果您然后设置文档的2px样式，那么它具有：

24px

你会知道图像行必须变成图像列的点是身体的宽度小于{{ 1}} + 996px + body - 或body { margin: 12px; padding: 0; }。

然后，您可以设置12px查询：

996px

完整示例：

12px

1020px

一行中的所有图像，或者彼此之下的所有图像

4 个答案: