这就是我的项目目前的样子:
df %>%
group_by(speaker) %>%
filter(first(!is.na(speaker)) & nth(is.na(speaker),2) & nth(!is.na(speaker),3))
所以基本上,我想要的是拆分 div,以及 X 在图像中的位置我想要一个小图标(在左侧)。我尝试使用 <!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>
和 float left
进行拆分,但无法使其正常工作。有什么想法吗?
答案 0 :(得分:1)
<!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>
答案 1 :(得分:0)
使用 flex
可以实现这一点
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;
}
.flex{
display: flex;
align-items:center;/*play with this to align picture to box*/
}
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/f10f36656a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="flex">
<img class="feed-avatar" src="img_avatar.png">
<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>
</body>
</html>