Question

我对Html＆amp; CSS。我正在尝试将投资组合网站作为自己的练习。但是，当我尝试将多张图片放在彼此旁边时，有点像画廊。我的照片开始重叠。我试着找几个小时的解决方案了。但似乎没有任何效果。

你们有没有人提出可能导致解决方案的建议？提前致谢!!] 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width", initial-scale=1.0>

     <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


    <link href="styles/styles.css" rel="stylesheet"> 
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>


    <title>Noah Wallaart</title>
</head>
<body>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="header">  
        <div class="navbar navbar-default"> 
           <div class="container">

            </div>  
        </div>  
 </div>

 <div class="jumbotron">
     <div class="container">
         <div class="row">
                <div class="col-md-6">     
                      <h1>Noah Wallaart</h1>
                </div>

                <div class="col-md-6">    
                </div>      
         </div>  
     </div>
</div>     

<section>
    <div class="container">
       <div class="row">
           <div class="col-md-"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
       </div>

    </div>

</section>



</body>
</html>

Answer 1

试试这个：

<style>
    .col-md-3{
        margin: 10px;
 }
</style>
<div class="container">
       <div class="row">
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
       </div>

    </div>

Answer 2

更改

 <div class="container">
       <div class="row">
           <div class="col-md-"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
       </div>

    </div>

到

 <div class="container">
       <div class="row">
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
           <div class="col-md-3"><img src="image/background.JPG"></div>
       </div>

    </div>

你错过了3，这意味着中等列不会加起来正确的12，所以会有一些问题。

Answer 3

我已经使用了你的代码，看起来这是由于图像的大小。尝试在每个图像上指定相同宽度的图像。

重叠

3 个答案: