如何使用引导程序移动卡中的项目-3

所以我有这张卡片，我不知道如何按照我想要的方式排列卡片中的项目。在html代码中，我使用了bootstrap-3。Css只是noob的基本像素移动。

<body>
<div class="row">
<div class="col-lg-4 col-md-6 pop-up">
<div class="front">
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
<br />

.front {
display: flex;
}

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-lg-4 col-md-6 pop-up">
<div class="front">
<div>
<img class="girlimg" src="https://picsum.photos/250/150" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
</div>
<br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

这只是使用了flexbox，它非常有用。如果你想了解更多CSS技巧有一篇好文章：Flexbox 完整指南

相关内容

最新更新

热门标签：