布局CSS＆amp; HTML，对齐问题
我有这种图片布局。如您所见，第一行的第一张图片与第二行的第一张图片不在同一行。有点不对......我该如何解决？我需要他们所有人同等对齐。我附上了整个代码。请帮忙。我尝试了边距，填充，显示，但没有做对。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body {
background-image: url('../images/background.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
font-family: 'Roboto Condensed', sans-serif;
}
.circle-count {
position: absolute;
right: -5px;
top: -5px;
color: #fff;
border-radius: 50%;
padding: 5px 7px;
font-family: Tahoma;
font-weight: 500;
font-size: 14px;
background-color: #9b59b6;
}
.main {
background-color: #feeeea;
}
/*Gallery*/
.photo-modal {
cursor: pointer;
}
.photos-container {
margin-bottom: 80px;
}
.photo-element {
width: 200px;
height: 200px;
margin: 30px 30px 0 0;
border-radius: 15px;
padding: 15px;
display: inline-block;
}
.image-fix {
border-radius: 15px;
width: 200px;
height: 200px;
vertical-align: inherit;
}
.add-photo {
background: #f5e0db;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: bottom;
text-align: center;
text-transform: uppercase;
}
.likes-count {
position: relative;
right: -180px;
top: 18px;
color: #fff;
border-radius: 50%;
padding: 5px 7px;
font-family: Tahoma;
font-weight: 500;
font-size: 17px;
background-color: #e87193;
}
.add-photo input[type="file"] {
display: none;
}
.add-photo .fa {
color: #e8bcb5;
font-size: 24px;
padding: 15px 0;
}
.add-photo label {
font-weight: bold;
font-size: 14px;
color: #e86d8f;
text-decoration: none;
cursor: pointer;
}
.photo-info-author {
width: 32px;
height: 32px;
border-radius: 50%;
}
.photo-author-name {
padding-right: 3px;
padding-top: 5px;
}
.all-photo-likes {
padding-left: 15px;
padding-top: 8px;
color: #e87193;
}
.all-photo-no-likes{
padding-left: 15px;
padding-top: 8px;
color: #bbbbbb;
}
.second-line-photos{
margin-top: 39px; }
.third-line-photos{
margin-top: 79px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="Компания TASOMA промо текст">
<meta name="author" content="Soft Group">
<title>Vikids</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Main style -->
<link href="assets/css/vikids-css.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- START Main container -->
<main>
<div class="container-fluid main">
<section class="row photos-container">
<div class="col-md-12">
<div class="photo-element add-photo">
<label>
<input type="file">
<i class="fa fa-plus" aria-hidden="true"></i>
<p>Добавить <br/>фотографию</p>
</label>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="./assets/images/gallery/gallery6.png">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- END Main container -->
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="https://use.fontawesome.com/ae7c834c9a.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
感谢您的帮助。感谢
2 个答案:
答案 0 :(得分：0)
我已在下面的代码段中添加了评论。
摘要是......
- 在您的＆＃39;类似的计数器上使用
position: absolute。将position: relative添加到其容器中。 - 移除图像容器周围的
padding - 将
.add-photovertical-align更改为top。 - 使用
margin空间照片（我将上边距增加到60px）
根据评论更新照片
下的信息根据您当前的布局，您只需删除添加到.row的负左右边距。您还可以删除“喜欢”中的padding-left。行尾的项目。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
body {
background-image: url('../images/background.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
font-family: 'Roboto Condensed', sans-serif;
}
.circle-count {
position: absolute;
right: -5px;
top: -5px;
color: #fff;
border-radius: 50%;
padding: 5px 7px;
font-family: Tahoma;
font-weight: 500;
font-size: 14px;
background-color: #9b59b6;
}
.main {
background-color: #feeeea;
}
/*Gallery*/
.photo-modal {
cursor: pointer;
}
.photos-container {
margin-bottom: 80px;
}
.photo-element {
width: 200px;
height: 200px;
margin: 60px 30px 0 0;
/* Increase top margin to space */
border-radius: 15px;
/* padding: 15px; Not needed */
display: inline-block;
position: relative;
/* Needed to position number of likes */
}
.image-fix {
border-radius: 15px;
width: 200px;
height: 200px;
vertical-align: inherit;
}
.add-photo {
background: #f5e0db;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
text-transform: uppercase;
vertical-align: top;
/* Change from 'bottom' */
}
.likes-count {
position: absolute;
right: 0;
top: 0;
color: #fff;
border-radius: 50%;
padding: 5px 7px;
font-family: Tahoma;
font-weight: 500;
font-size: 17px;
background-color: #e87193;
}
.add-photo input[type="file"] {
display: none;
}
.add-photo .fa {
color: #e8bcb5;
font-size: 24px;
padding: 15px 0;
}
.add-photo label {
font-weight: bold;
font-size: 14px;
color: #e86d8f;
text-decoration: none;
cursor: pointer;
}
.photo-info-author {
width: 32px;
height: 32px;
border-radius: 50%;
}
.photo-author-name {
padding-right: 3px;
padding-top: 5px;
}
.all-photo-likes {
/* padding-left: 15px; */
padding-top: 8px;
color: #e87193;
}
.all-photo-no-likes {
/* padding-left: 15px; */
padding-top: 8px;
color: #bbbbbb;
}
.second-line-photos {
margin-top: 39px;
}
.third-line-photos {
margin-top: 79px;
}
.photo-element .row {
margin: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="Компания TASOMA промо текст">
<meta name="author" content="Soft Group">
<title>Vikids</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Main style -->
<link href="assets/css/vikids-css.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- START Main container -->
<main>
<div class="container-fluid main">
<section class="row photos-container">
<div class="col-md-12">
<div class="photo-element add-photo">
<label>
<input type="file">
<i class="fa fa-plus" aria-hidden="true"></i>
<p>Добавить <br/>фотографию</p>
</label>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="./assets/images/gallery/gallery6.png">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- END Main container -->
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="https://use.fontawesome.com/ae7c834c9a.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
答案 1 :(得分：0)
关闭你的第一个<div class='col-md-12'>并在关闭后重新打开，如果你想打破......
body {
background-image: url('../images/background.png');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
font-family: 'Roboto Condensed', sans-serif;
}
.circle-count {
position: absolute;
right: -5px;
top: -5px;
color: #fff;
border-radius: 50%;
padding: 5px 7px;
font-family: Tahoma;
font-weight: 500;
font-size: 14px;
background-color: #9b59b6;
}
.main {
background-color: #feeeea;
}
/*Gallery*/
.photo-modal {
cursor: pointer;
}
.photos-container {
margin-bottom: 80px;
}
.photo-element {
width: 200px;
height: 200px;
margin: 30px 30px 0 0;
border-radius: 15px;
padding: 15px;
display: inline-block;
}
.image-fix {
border-radius: 15px;
width: 200px;
height: 200px;
vertical-align: inherit;
}
.add-photo {
background: #f5e0db;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: bottom;
text-align: center;
text-transform: uppercase;
}
.likes-count {
position: relative;
right: -180px;
top: 18px;
color: #fff;
border-radius: 50%;
padding: 5px 7px;
font-family: Tahoma;
font-weight: 500;
font-size: 17px;
background-color: #e87193;
}
.add-photo input[type="file"] {
display: none;
}
.add-photo .fa {
color: #e8bcb5;
font-size: 24px;
padding: 15px 0;
}
.add-photo label {
font-weight: bold;
font-size: 14px;
color: #e86d8f;
text-decoration: none;
cursor: pointer;
}
.photo-info-author {
width: 32px;
height: 32px;
border-radius: 50%;
}
.photo-author-name {
padding-right: 3px;
padding-top: 5px;
}
.all-photo-likes {
padding-left: 15px;
padding-top: 8px;
color: #e87193;
}
.all-photo-no-likes{
padding-left: 15px;
padding-top: 8px;
color: #bbbbbb;
}
.second-line-photos{
margin-top: 39px; }
.third-line-photos{
margin-top: 79px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="Компания TASOMA промо текст">
<meta name="author" content="Soft Group">
<title>Vikids</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Main style -->
<link href="assets/css/vikids-css.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- START Main container -->
<main>
<div class="container-fluid main">
<section class="row photos-container">
<div class="col-md-12">
<div class="photo-element add-photo">
<label>
<input type="file">
<i class="fa fa-plus" aria-hidden="true"></i>
<p>Добавить <br/>фотографию</p>
</label>
</div>
</div><!--add this-->
<div class="col-md-12"><!--add this too-->
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="./assets/images/gallery/gallery6.png">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<span class="likes-count"> 37 </span>
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="photo-element">
<img class="image-fix" src="https://www.babble.com/wp-content/uploads/2012/06/supercutebaby1-200x200.jpg">
<div class="row">
<div class="col-xs-3">
<img class="photo-info-author" src="./assets/images/users/marina-ivanova.png">
</div>
<div class="col-xs-7 photo-author-name"> Имя Фамилия
</div>
<div class="col-xs-1">
<i class="all-photo-no-likes fa fa-heart" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- END Main container -->
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="https://use.fontawesome.com/ae7c834c9a.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？