在 div 左侧添加图标
[英]Add icon left side of div
问题描述
So this is how my project currently looks like:
所以这就是我的项目目前的样子：
<: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>
And this is basically what I want it to look like:这基本上就是我想要的样子：
So basically, what I want is to split up the div, and where the X is in the image I want to have a small icon (on the left side there).所以基本上，我想要的是分割 div，并且 X 在图像中的位置我想要一个小图标（在左侧）。 I tried split using float left , and float right , but can't make it work.我尝试使用float left和float right进行拆分，但无法使其工作。 Any ideas?有任何想法吗？
2 个解决方案
解决方案1
1 2021-03-12 11:31:48
<: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>
解决方案2
0 2021-03-12 11:34:09
Using flex you can achieve this使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将宽度添加到 div 的左侧？ - Add width to left side of div?
如何在div的左侧添加加号 - How to add a plus character at the left side of the div
在任意页面的左侧添加div - Add a div on the left side of a any page
div并排并向左浮动 - div side by side and float left
图像左侧的Div - Div on the left side of an image
在div左右两侧的div之间添加文本 - Add text between divs that are on the left and right side of a div
如何将图片添加到div的左侧 - How do you Add an image to the left side of a div
带有左右图标的HTML - HTML with icon on left and right side
为什么右侧div与左侧div不并排？ - Why right side div is not side by side with the left side div?
div 元素左侧的间隙 - gaps on left side of div element
相关标签