我已经在这个问题上停留了一段时间,不太确定这个问题是否超级明显,因为我没有来自前端开发背景。
我试图设计一个模仿youtube live chat设计的东西(构建一个集成youtube live chat API的OBS插件)。页面的JsFiddle可以在这里看到-〉jsfiddle demo
不要介意边框,我只是用它来帮助我可视化我的div的边界,但我这里的问题是我如何让用户名和评论的文本直接与pfp图像对齐。
我试过使用浮点数、flexbox、内联属性等,它们似乎不起作用,我也不确定我是否正确地使用了它们,因为我不是一个前端Web开发人员,我对css的了解只是通过堆栈溢出和一些谷歌搜索。
我的理想结果是尽可能接近这样的目标:
.messageBox {
position: absolute;
width: 300px;
height: 500px;
border: 1px solid #d1d1d1;
overflow-y: auto;
}
.messageBox .header {
position: absolute;
width: 100%;
height: 50px;
border-bottom: 1px solid #d1d1d1;
}
.messageBox .header p {
position: absolute;
margin-left: 15px;
font-family: 'Roboto', sans-serif;
}
.messageBox .content {
width: 95%;
position: absolute;
top: 50px;
height: auto;
border: 1px solid green;
}
.messageBox .content .message {
margin: 10px;
border: 1px solid red;
font-family: 'Roboto', sans-serif;
font-size: small;
}
.messageBox .content .message .pfp {
width: 25px;
border-radius: 500px;
margin-right: 10px;
}
.messageBox .content .message .text{
margin-left: 15px;
}
.messageBox .content .message .text span{
color: #747474;
margin-right: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="messageBox">
<div class="header">
<p>Live Chat Replay</p>
</div>
<div class="content">
<div class="message">
<img class="pfp" src="https://yt3.ggpht.com/ytc/AAUvwnjDRW6z60q7Db1fOB8-fHRjz4HcW_d-_sa9Ow=s88-c-k-c0x00ffffff-no-rj"/>
<p class="text"><span>Michael Collins</span>Hello world, this is a test message</p>
</div>
</div>
</div>
<!-- End your code here -->
</body>
</html>
2条答案
按热度按时间cbeh67ev1#
所以,你可以用浮点、柔体和网格来达到同样的效果。
我刚刚编辑了你的JSFiddle,并使用flex实现了一个解决方案。检查一下here。
你可以加些填充物使盒子看起来更漂亮。
hc8w905p2#
请使用伸缩与一些边距的图像和段落