Question

我想一次显示三个图像，所以我为此写了css以在块的单行和中心显示图像，但问题是图像之一会稍微上升。如果我为此写css以相同的高度显示它正在移动所有三个div。这是该代码。

<input type="checkbox" id="checkUncheckAll">

 .member1 {
	width:250px;
    height:200px;
    display:inline-block;
    margin-right:30px;
    }
    .member1 + .member1{	
     width:250px;
     height:200px;
     display:inline-block;
     margin-right:30px;
     }
     .member2{
	 width:250px;
     height:200px;
     display:inline-block;
     margin-right:30px;
      }
     .member-details {
     width: 100%;
     text-align: center;
     }

Answer 1

好的，使用引导程序，就可以毫无问题地进行设计

因此，我编写了以下代码，这可能有助于您查看。这是jsfiddle的链接：https://jsfiddle.net/dupinderdhiman/7b5dzp9o/9/

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="container-fluid">
  <div class="row">
    <div class="col-4"><img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png"></div>
    <div class="col-4"><img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png"></div>
    <div class="col-4"><img src="https://www.gstatic.com/images/branding/product/2x/photos_96dp.png"></div>
  </div>
</div>
</div>
</body>
</html>

Answer 2

我们看不到图像（链接断开），因此出现了问题。但是，如果您只想连续显示图像并居中显示，建议您勾选[CSS Flexbox]。（https://www.w3schools.com/css/css3_flexbox.asp）

在css中上下显示图像

2 个答案: