html - 不能垂直排列 div 内的所有元素(1 个图像 2 个跨度),2 个跨度应该在彼此之上
问题描述
你好,我已经尝试了几天徒劳地在 HTML 5 和 CSS 中创建一个项目块,其中有一个 div,其中包含左侧的图像,图像旁边的 2 个文本应该在另一个顶部时打开移动视图但响应式,因此在普通浏览器视图中它们应该在一行上。
我已经尝试将 SO 的几个 css 解决方案结合起来并取得部分成功,据我所知,这是我能够实现的最大目标
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
/*not support gradient browsers*/
background: #002053;
color: white;
font-family: sans-serif;
}
ul {
list-style-type: none;
padding: 0;
}
.wrapper {
width: 100%;
margin: 10 auto;
}
.selected-element {
height:9rem;
border-bottom: 0.1rem solid #ccc;
}
.saved-users {
background-color: rgba(240, 240, 240, 0.3);
}
.segment {
line-height: 3.5rem;
}
.icon {
width: 5em;
height: 5em;
border-radius: 2.5rem;
vertical-align:
}
.user-elements {
font-size: 2.5rem;
}
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/7.0.0/normalize.css">
<body>
<div class="wrapper">
<main class="container">
<section class="saved-users">
<div class="selected-element" id="freaking-id">
<img src="https://avatars3.githubusercontent.com/u/12096062?v=4" class="icon">
<span class="segment">
<span class="user-elements user-name"> Username </span>
<span class="user-elements time-stamp">2018-10-05 22:49:41</span>
</span>
</div>
<div class="selected-element" id="second-id">
<img src="https://avatars3.githubusercontent.com/u/12096062?v=4" class="icon segment">
<span class="segment">
<span class="user-elements user-name"> Second Username </span>
<span class="user-elements time-stamp">2018-10-07 22:09:41</span>
</span>
</div>
</section>
</main>
</div>
</body>
</html>
解决方案
您需要使用 CSS 媒体查询来更改移动视图上的样式。您可以查看此演示:
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
/*not support gradient browsers*/
background: #002053;
color: white;
font-family: sans-serif;
}
ul {
list-style-type: none;
padding: 0;
}
.wrapper {
width: 100%;
margin: 10 auto;
}
.selected-element {
height:9rem;
border-bottom: 0.1rem solid #ccc;
line-height: 9rem;
}
.saved-users {
background-color: rgba(240, 240, 240, 0.3);
}
.segment {
line-height: 2rem;
display: inline-block;
vertical-align: middle;
}
.icon {
width: 5em;
height: 5em;
border-radius: 2.5rem;
vertical-align: middle;
display: inline-block;
}
.user-elements {
font-size: 2.5rem;
}
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
.segment {
max-width: 80%;
line-height: 3rem;
}
.user-elements {
display: block;
}
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/7.0.0/normalize.css">
</head>
<body>
<div class="wrapper">
<main class="container">
<section class="saved-users">
<div class="selected-element" id="freaking-id">
<img src="https://avatars3.githubusercontent.com/u/12096062?v=4" class="icon">
<span class="segment">
<span class="user-elements user-name"> Username </span>
<span class="user-elements time-stamp">2018-10-05 22:49:41</span>
</span>
</div>
<div class="selected-element" id="second-id">
<img src="https://avatars3.githubusercontent.com/u/12096062?v=4" class="icon segment">
<span class="segment">
<span class="user-elements user-name"> Second Username </span>
<span class="user-elements time-stamp">2018-10-07 22:09:41</span>
</span>
</div>
</section>
</main>
</div>
</body>
</html>
推荐阅读
- kotlin - 当结果应该具有值或没有值时改进 applicativeNel 验证
- c# - JToken NullReferenceException
- wiremock - 场景:第一次响应成功,但第二次相同的请求返回 404 错误码
- autodesk-forge - 模型导数:获取特定对象的属性失败,出现 404
- c# - 如何在 asp.net C# 中为某些控制器操作设置默认路由?
- asynchronous - 如何在请求后使 IdentityDbContext 保持活动状态,以便服务可以使用 UserManager 完成其任务?
- python - 为什么使用多处理会得到如此糟糕的结果?
- octave - 找到关于 R 平方的两个常数...耗时
- c# - 更改泛型类型定义中的泛型可空性类型(输入!或?,输出总是!)
- angular - 将材料设计按钮置于角表内的中心