html - 在 div 左侧添加图标
问题描述
所以这就是我的项目目前的样子:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
<style>
body {
background-color: lightgray;
}
.feedcard {
width: 95%;
height: 150px;
border: 5px solid #7F0008;
margin: 5px;
background-color: white;
padding: 10px;
}
.feed-avatar {
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
height: 60px;
width: 60px;
display:inline;
}
.box {
display: inline-block;
vertical-align: top;
width: 60px;
height: 60px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 20px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.boxcontent {
margin: 5px;
margin-top:10px;
}
.buttons {
margin-top:10px;
}
</style>
</head>
<body>
<!-- <img class="feed-avatar" src="img_avatar.png"> -->
<div id="main-container">
<div class="feedcard">
<div class="mainbox">
<div class="box">
<img class="feed-avatar" src="img_avatar.png">
</div>
<div class="content">
<p class="title">NAME HERE</p>
<p class="sub-title" style="color:rgb(128,128,128);">Team 3</p>
</div>
<div class="boxcontent">
<div class="sale">
<text style="color:rgb(76, 175, 80);font-weight: bold;font-size: 18px;">PP Test 30%</text>
</div>
<div class="buttons">
<div class="actionbuttons" style="float:left;">
<form method="post" action="kudos.php" id="myForm">
<input type="hidden" name="hidden_id" value="<?php echo $id ?>">
<input type="hidden" name="hidden_ident" value="<?php echo $myIdent ?>">
<text style="color:rgb(128,128,128);font-size: 16px;" class="fas fa-heart"> 0</text>
</form>
</div>
<div class="actionbuttons" style="float:right;">
23 minutes ago
</div>
</div> <!-- buttons -->
</div> <!-- boxcontent -->
</div> <!-- buttons -->
</div> <!-- feedcard -->
</div> <!-- main-container -->
</body>
</html>
所以基本上,我想要的是分割 div,并且 X 在图像中的位置我想要一个小图标(在左侧)。我尝试使用float left
, 和拆分float right
,但无法使其工作。有任何想法吗?
解决方案
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
<style>
body {
background-color: lightgray;
}
div#main-container { /* flex css */
display: flex;
}
.closeBtn { /*left side btn css */
background: lightgray;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 60px;
color: #fff;
}
.feedcard {
width: 95%;
height: 150px;
border: 5px solid #7F0008;
margin: 5px;
background-color: white;
padding: 10px;
}
.feed-avatar {
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
height: 60px;
width: 60px;
display:inline;
}
.box {
display: inline-block;
vertical-align: top;
width: 60px;
height: 60px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 20px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.boxcontent {
margin: 5px;
margin-top:10px;
}
.buttons {
margin-top:10px;
}
</style>
</head>
<body>
<!-- <img class="feed-avatar" src="img_avatar.png"> -->
<div id="main-container">
<div class="closeBtn">X</div> <!-- ADD here X btn -->
<div class="feedcard">
<div class="mainbox">
<div class="box">
<img class="feed-avatar" src="img_avatar.png">
</div>
<div class="content">
<p class="title">NAME HERE</p>
<p class="sub-title" style="color:rgb(128,128,128);">Team 3</p>
</div>
<div class="boxcontent">
<div class="sale">
<text style="color:rgb(76, 175, 80);font-weight: bold;font-size: 18px;">PP Test 30%</text>
</div>
<div class="buttons">
<div class="actionbuttons" style="float:left;">
<form method="post" action="kudos.php" id="myForm">
<input type="hidden" name="hidden_id" value="<?php echo $id ?>">
<input type="hidden" name="hidden_ident" value="<?php echo $myIdent ?>">
<text style="color:rgb(128,128,128);font-size: 16px;" class="fas fa-heart"> 0</text>
</form>
</div>
<div class="actionbuttons" style="float:right;">
23 minutes ago
</div>
</div> <!-- buttons -->
</div> <!-- boxcontent -->
</div> <!-- buttons -->
</div> <!-- feedcard -->
</div> <!-- main-container -->
</body>
</html>
推荐阅读
- typescript - 在返回承诺的函数上使用 .then 会抛出“这是不可调用的”
- javascript - 试图创建一个有分数和时间的排行榜。本地存储?
- java - FindBugs 插件 Eclipse 发现的错误
- angular - 如何在不从根 URL 开始的情况下使角度链接工作?
- angular - Angular SSR 无需在点击链接上重新加载页面
- docker - LetsEncrypt 的 TLS 证书应该在所有容器上吗?
- sparql - 如何在 Sparql 中的多个列上选择不同的?
- reactjs - 如何使用 useReducer 和 useEffect 从 API 获取,同时仍然允许重新查询
- scala - 带有HTTPS的Scalatra?
- oracle - oracle drop table if exists pl/sql not working using exception