使用网格显示时如何正确放置CSS帖子项目
问题描述 投票：1回答：1
我如何使#post-date，#post-author-name元素看起来像它们在下图中的显示方式：
代替下图中的混乱页面：
完整代码有点大，所以我将其粘贴在下面的代码笔代码段中（它不会像bcs那样显示帖子，它使用reddit api来显示subreddit的帖子）https://codepen.io/salahmak/pen/RwwOjMV
或：
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.
const remote = require('electron').remote;
(function () {
function init() {
document.getElementById("min-btn").addEventListener("click", function (e) {
const window = remote.getCurrentWindow();
window.minimize();
});
document.getElementById("max-btn").addEventListener("click", function (e) {
const window = remote.getCurrentWindow();
if (!window.isMaximized()) {
window.maximize();
} else {
window.unmaximize();
}
});
document.getElementById("close-btn").addEventListener("click", function (e) {
const window = remote.getCurrentWindow();
window.close();
});
};
document.onreadystatechange = function () {
if (document.readyState == "complete") {
init();
}
};
})();
MAIN();
async function MAIN() {
const snoowrap = require('snoowrap');
const userAgent = 'electron.js:DZGC APP:v0.0.1 (by /u/Mr_DJA for /r/Dz_Gamers_Community)';
const clientId = 'Sl36RL-uj9P3CA';
const Store = require('electron-store');
const store = new Store();
//const Keyv = require('keyv');
//const DB = new Keyv('sqlite://data.sqlite');
//DB.on('error', err => console.error('(DB) Keyv connection error:', err));
const GetNewRefreshToken = async function (callback) {
const baseUrl = 'https://www.reddit.com/api/v1/';
const request = require('request-promise').defaults({
json: true,
baseUrl
});
const port = 65010;
const expected_redirect_uri = `http://localhost:${port}/authorize_callback`;
const scope = 'account creddits edit flair history identity livemanage modconfig modcontributors modflair modlog modmail modothers modposts modself modtraffic modwiki mysubreddits privatemessages read report save structuredstyles submit subscribe vote wikiedit wikiread';
const state = require('crypto').randomBytes(16).toString('base64');
const authenticationUrl = `${baseUrl}authorize?${require('querystring').stringify({ client_id: clientId, response_type: 'code', state, redirect_uri: expected_redirect_uri, duration: 'permanent', scope: scope, })}` //refreshToken
document.getElementById("login-btn").addEventListener("click", function (e) {
require('open')(authenticationUrl);
});
var server = require('http').createServer((req) => {
const query = require('url').parse(req.url, true).query;
console.log('--------------------query--------------------');
console.log(query);
console.log('---------------------------------------------');
if (query.state !== state) {
console.error(401);
server.close();
callback('Error: 401');
} else if (query.code) {
request.post({
uri: 'access_token',
auth: {
user: clientId,
pass: ''
},
form: {
grant_type: 'authorization_code',
code: query.code,
redirect_uri: expected_redirect_uri
},
}).then(token_info => {
console.log('-----------------token_info-----------------');
console.log(token_info);
console.log('--------------------------------------------');
//DB.set("refresh_token", token_info["refresh_token"]);
store.set('refresh_token', token_info["refresh_token"]);
server.close();
callback(token_info["refresh_token"]);
}).catch(err => console.error(err));
} else if (query.error === 'access_denied') {
server.close();
callback('Error: access_denied');
} else {
console.error({
statusCode: 400,
statusMessage: 'Failed to parse response from reddit'
})
server.close();
callback('Error: 400');
}
}).listen(port);
}
const GetRefreshToken = async function (callback) {
const RefreshToken = await store.get('refresh_token');
console.log('RT: ' + RefreshToken);
callback(RefreshToken);
}
const Login = async function (refreshToken, callback) {
const r = new snoowrap({
userAgent: userAgent,
clientId: clientId,
clientSecret: '',
refreshToken: refreshToken || '',
});
const test = await r.getMe().name.catch(console.error);
if (test) {
callback(r);
}
if (!test) {
GetNewRefreshToken(newRefreshToken => {
const r1 = new snoowrap({
userAgent: userAgent,
clientId: clientId,
clientSecret: '',
refreshToken: newRefreshToken,
});
callback(r1);
});
}
}
GetRefreshToken(async refreshToken => {
Login(refreshToken, async (r) => {
const DZGC = r.getSubreddit('Dz_Gamers_Community');
const userAvatar = await r.getMe().icon_img.catch(console.error);
const userName = await r.getMe().name.catch(console.error);
const subredditIcon = await DZGC.community_icon.catch(console.error);
//const subredditCover = await r.getMe().icon_img.catch(console.error);
DZGC.subscribe();
document.getElementById("profile-picture").style.backgroundImage = `url(${userAvatar})`;
document.getElementById("user-name").innerHTML = userName;
document.getElementById("subreddit-icon").style.backgroundImage = `url(${subredditIcon})`;
const elem1 = document.getElementById("login");
elem1.parentNode.removeChild(elem1);
const posts = await r.getSubreddit('Dz_Gamers_Community').getNew({ 'limit': 1000 });
//const posts = await r.getSubreddit('gaming').getHot({ 'limit': 1000 });
for (let post in posts) {
if (posts.hasOwnProperty(post) && !isNaN(post)) {
console.log(posts[post]);
//console.log(`${post} : ${posts[post].title} : ${posts[post].selftext}`)
console.log(posts[post].created_utc * 1000)
console.log(new Date(posts[post].created_utc * 1000))
console.log(timeSince(new Date(posts[post].created_utc * 1000)))
const postsContainer = document.getElementById("posts");
let postBlock = document.createElement("ul");
postBlock.innerHTML = `
<li id="post-bar">
<div id="post-author-icon" style="background-image: url('${await posts[post].author.icon_img}');"></div>
<div id="post-author-name">${posts[post].author.name}</div>
<div id="post-date">${timeSince(new Date(posts[post].created_utc * 1000))}</div>
<div id="post-stats">
<div id="post-comments-stats"></div>
<div id="post-score-stats"></div>
</div>
<div id="post-save-btn"></div>
</li>
<li id="post-title">${posts[post].title}</li>
<li id="post-content">${posts[post].selftext_html}</li>
<li id="post-attachment">
<img src="${await posts[post].url}"></img>
</li>
`;
postBlock.setAttribute("id", posts[post].name);
postBlock.classList.add("post-block");
postsContainer.appendChild(postBlock);
}
}
});
});
}
function timeSince(timeStamp) {
var now = new Date(),
secondsPast = (now.getTime() - timeStamp.getTime()) / 1000;
if(secondsPast < 60){
return parseInt(secondsPast) + 's';
}
if(secondsPast < 3600){
return parseInt(secondsPast/60) + 'm';
}
if(secondsPast <= 86400){
return parseInt(secondsPast/3600) + 'h';
}
if(secondsPast > 86400){
day = timeStamp.getDate();
month = timeStamp.toDateString().match(/ [a-zA-Z]*/)[0].replace(" ","");
year = timeStamp.getFullYear() == now.getFullYear() ? "" : " "+timeStamp.getFullYear();
return day + " " + month + year;
}
}/*/////////////////////////////////
////////////WINDOW PART////////////
/////////////////////////////////*/
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#window {
height: 100%;
width: 100%;
border: 3px solid #3554ba;
position: absolute;
box-sizing: border-box;
}
#title-bar {
height: 20px;
width: 100%;
background-color: #101d55;
user-select: none;
cursor: default;
-webkit-app-region: drag;
}
#icon {
height: 20px;
width: 20px;
background-image: url('./assets/titlebar/icon.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#title {
font-family: "Segoe UI", sans-serif;
font-size: 10px;
color: #ffffff;
position: absolute;
top: 3px;
left: 22px;
}
#buttons {
position: absolute;
top: 0;
right: 0;
line-height: 0;
-webkit-app-region: no-drag;
}
#close-btn {
height: 20px;
width: 20px;
background-color: transparent;
color: #ffffff;
border: none;
font-family: "Segoe MDL2 Assets Local";
font-size: 8px;
outline: none;
}
#max-btn {
height: 20px;
width: 20px;
background-color: transparent;
color: #ffffff;
border: none;
font-family: "Segoe MDL2 Assets Local";
font-size: 8px;
outline: none;
}
#min-btn {
height: 20px;
width: 20px;
background-color: transparent;
color: #ffffff;
border: none;
font-family: "Segoe MDL2 Assets Local";
font-size: 8px;
outline: none;
}
#close-btn:hover {
background-color: #ff2c39;
}
#max-btn:hover {
background-color: #2cf9ff;
}
#min-btn:hover {
background-color: #2cf9ff;
}
@font-face {
font-family: "Segoe MDL2 Assets Local";
src: url("./assets/fonts/SegMDL2.ttf");
}
.post-block {
background: powderblue;
margin: auto;
margin-bottom: 50px;
margin-top: 50px;
height: fit-content;
width: 700px;
list-style: none;
padding: 0;
}
#post-bar {
height: 60px;
background: #878787;
}
#post-author-icon {
height: 40px;
width: 40px;
position: relative;
top: 9px;
left: 15px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 1px solid #2cf9ff;
}
#post-author-name {
position: relative;
color: white;
font-weight: 600;
font-family: sans-serif;
line-height: 22px;
}
#post-date {
position: relative;
color: white;
font-family: sans-serif;
line-height: 12px;
font-size: 10px;
}
#post-title {
background: rgb(142, 155, 168);
color: white;
font-weight: 600;
font-family: sans-serif;
font-size: 22px;
line-height: 40px;
text-align: center;
unicode-bidi: plaintext;
}
#post-content {
background: #878787;
unicode-bidi: plaintext;
text-align: -webkit-auto;
}
#post-content * {
background: #878787;
unicode-bidi: plaintext;
text-align: -webkit-auto;
margin: 0;
}
#post-attachment {
background: #e3e3e4;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#post-attachment * {
width: 700px;
}
/*/////////////////////////////////
/////////////LOGIN PART////////////
/////////////////////////////////*/
#login {
position: fixed;
top: 23px;
left: 3px;
right: 3px;
bottom: 3px;
background-color: #292b2f;
z-index: 1;
}
#login * {
z-index: 1;
}
#login-logo {
position: relative;
width: 250px;
height: 250px;
border: 3px solid #2cf9ff;
top: 10%;
margin: auto;
background-image: url('./assets/images/logo.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#login-btn {
position: relative;
border: 3px solid #2cf9ff;
top: 120%;
transform: translate(50%, 0%);
}
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px black;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: white;
border-radius: 10px;
}
.grid {
display: grid;
grid-template-columns: 300px 5% auto 5%;
grid-template-rows: 50% 50%;
background-image: url('https://get.wallhere.com/photo/Discord-discordapp-discord-background-1278375.jpg');
background-size: cover;
height: 100vh;
}
#menu {
display: grid;
background-color: #36393f;
text-align: center;
font-size: 30px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2 end;
grid-template-rows: auto 65px;
}
#posts-wrapper {
display: grid;
background-color: gray;
text-align: center;
font-size: 30px;
grid-column-start: 3;
grid-column-end: 4;
grid-template-rows: 50px auto;
grid-template-columns: auto;
}
#posts {
background-color: #36393f;
grid-row-start: 2;
grid-row-end: 3;
}
#posts > .creator-container {
width: auto;
display: grid;
grid-template-rows: auto auto auto 70px;
background-color: #292b2f;
}
.creator-container > .post-type {
grid-row-start: 1;
grid-row-end: 2;
display: grid;
grid-template-columns: 50% 50%;
border-bottom: 1px solid grey;
}
.post-type > .text-post {
text-align: center;
color: white;
font-size: 22px;
margin-top: auto;
margin-bottom: auto;
padding: 10px 0px;
background-color: #292b2f;
border: none;
}
.text-post:focus {
outline: 1px solid #fff;
outline-offset: -1px;
}
.post-type > .media-post {
text-align: center;
color: white;
font-size: 22px;
margin-top: auto;
margin-bottom: auto;
border-left: 1px solid grey;
border-right: none;
padding: 10px 0px;
background-color: #292b2f;
border-top: none;
border-bottom: none;
}
.post-title > .title-text {
width: 96%;
grid-row-start: 2;
grid-row-end: 3;
padding: 8px 5px;
border: 1px solid grey;
background-color: #292b2f;
border-radius: 5px;
color: white;
margin-top: 10px;
}
.title-text:focus {
border: 1px solid white;
outline: none !important;
}
.post-content > .post-data {
width: 96%;
height: 180px;
grid-row-start: 3;
grid-row-end: 4;
padding: 8px 5px;
border: 1px solid grey;
background-color: #292b2f;
border-radius: 5px;
color: white;
margin-top: 10px;
overflow-y: scroll;
}
.post-data:focus {
border: 1px solid white;
outline: none !important;
}
.post-footer {
display: grid;
grid-template-columns: 100px 100px auto 100px;
grid-gap: 25px;
grid-row-start: 4;
grid-row-end: 5;
}
.post-footer > .spoiler {
color: white;
border: 1px solid grey;
font-size: 19px;
margin-top: auto;
margin-bottom: auto;
padding: 2px 0px;
border-radius: 2px;
margin-left: 25px;
}
.post-footer > .nsfw {
color: white;
border: 1px solid grey;
font-size: 19px;
margin-top: auto;
margin-bottom: auto;
padding: 2px 0px;
border-radius: 2px;
margin-left: 25px;
}
.post-footer > .post {
background-color: #7289da;
grid-column-start: 4;
color: white;
border: 1px solid grey;
font-size: 19px;
margin-top: auto;
margin-bottom: auto;
padding: 2px 0px;
margin-right: 25px;
border-radius: 2px;
}
.menu-footer {
display: grid;
grid-template-columns: 5px 42px 100px auto 64px 5px;
background-color: #292b2f;
border-top: #2cf9ff 1px solid;
}
#profile-picture {
height: 40px;
width: 40px;
border: 1px solid #2cf9ff;
margin-top: auto;
margin-bottom: auto;
grid-column-start: 2;
}
#user-name {
font-size: 14px;
color: white;
font-weight: 600;
font-family: sans-serif;
line-height: 18px;
margin-top: auto;
margin-bottom: auto;
grid-column-start: 3;
}
.menu-scroll {
display: grid;
grid-template-rows: 160px;
}
.menu-scroll>.cover {
background-color: #292b2f;
border-bottom: #2cf9ff 1px solid;
}
#subreddit-bar {
height: 60px;
width: 300px;
top: 100px;
position: absolute;
}
#subreddit-icon {
height: 40px;
width: 40px;
position: absolute;
bottom: 9px;
left: 15px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: 1px solid #2cf9ff;
}
#subreddit-name {
font-size: 17px;
position: absolute;
height: 22px;
bottom: 19px;
left: 65px;
color: white;
font-weight: 600;
font-family: sans-serif;
line-height: 22px;
}
#create-post-btn {
display: block;
background-color: #7289da;
color: white;
border: none;
font-size: 25px;
border-radius: 5px;
margin-top: auto;
margin-bottom: auto;
grid-column-start: 5;
width: 40px;
height: 40px;
}
.menu-scroll>.menu-list {
overflow-y: scroll;
}
.list-item {
background-color: tomato;
padding: 5px 0px;
margin-top: 5px;
width: 160px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DZGC APP</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<div id="window">
<div id="title-bar">
<div id="icon"></div>
<div id="title">Dz Gamers Community App</div>
<div id="buttons">
<!--
--><button id="min-btn"></button>
<!--
--><button id="max-btn"></button>
<!--
--><button id="close-btn"></button>
<!--
-->
</div>
</div>
</div>
<div class="grid" id="container">
<div class="grid-item" id="menu">
<div class="menu-scroll">
<div class="cover">
<div id="subreddit-bar">
<div id="subreddit-icon"></div>
<div id="subreddit-name">Dz Gamers Community</div>
</div>
</div>
<div class="menu-list">
</div>
</div>
<div class="menu-footer">
<div id="profile-picture"></div>
<div id="user-name">USER NAME</div>
<button id="create-post-btn">+</button>
</div>
</div>
<div class="grid" id="posts-wrapper">
<div id="posts">
</div>
</div>
</div>
<script src="./renderer.js"></script>
</body>
</html>1个回答
0
投票
投票
我推荐的一件事是changing post-bar，post-author-icon，post-author-name和post-date至class而不是id，因为您可能会在页面上显示多个帖子（id仅应使用一次）。
将以下CSS添加到post-bar：
.post-bar {
display: flex;
flex-direction: row;
}
然后包装post-author-name和post-date div，它们将以块的形式显示在post-author-icon div的旁边：
<div class="post-bar">
<div class="post-author-icon"></div>
<div class="post-info">
<div class="post-author-name">Name</div>
<div class="post-date">Date</div>
</div>
</div>
最新问题
- 角度材质输入字段中的图标未显示
- 使用 PyTorch Geometric RandomNodeSplit 获取 train_mask、val_mask、test_mask 时遇到问题
- 计算过滤列表中的不同值（Libre Office Calc）
- Angular 12：导航和重新加载页面
- Azure Function app：结果：失败异常：ImportError：无法从“azure.storage.blob”导入名称“BlobClient”（python）
- streamlit 出现错误 -“无法识别‘streamlit’”以及如何解决该问题
- 如何解决“您的 api 请求计数已超出？”对于 tmdb.org？
- 尝试在gitlab-ci中接受mr，有时会得到“分支无法合并”
- 需要设计建议，以便在 C++ 中的两个不同共享库（.so）之间进行通信
- “运行时错误‘70’：权限被拒绝”在 MS Access 上运行备份代码时
- R包partykit函数cforest如何与applyfun参数一起使用以在Windows上进行多核并行处理
- 无法使用flutter包“upgrader”检测更新
- 用户验收测试（UAT）和端到端（E2E）测试是一回事吗？
- Qt 5.10 使用样式表在 QMainWindow 上实现半透明背景
- .local 中的 Conda 包
- 制作带有限制的列表/生成器的最Pythonic方法
- 友好的验证码 - 是否需要验证请求？
- Azure Steam 分析查询
- 有没有办法在 Flutter 中点击叠加层
- 如何找到特定查询在表中没有返回行的最新日期？
© www.soinside.com 2019 - 2024. All rights reserved.