我正在努力在响应式布局中对齐和堆叠两个包含图像和链接的块。我已经准备了两个演示变体,但它们都没有按预期工作,而且我的想法已经用完了。
这是我想要达到的目标:
在桌面屏幕上,两个块应垂直和水平对齐,图像的顶角对齐。 在移动屏幕上,这两个块应该堆叠在一起,图像在上面,链接在它下面,左角对齐。 链接应该有悬停效果,在文本下划线,下划线长度等于文本长度。
我准备了两个演示来展示问题的不同方面:
Demo 1: https://jsfiddle.net/51eqzpb0/
Demo 2: https://jsfiddle.net/arobjf4z/
演示 1 CSS:
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.main {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
height: 100vh;
background: linear-gradient(120deg, #383745 50%, #22202B 50%);
background-size: 100% 100%;
}
.main .header,
.main legend.header {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.25rem;
margin: 0.5em 0;
}
.main .bio,
.main .contact {
/*max-width: 320px; */
flex-basis: 320px;
/*margin-top: 20vh; */
margin: auto;
color:#fff;
text-align: center;
}
.main .bio h3{color:#fff;}
.main .bio .bio-link {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1rem;
display: inline-block;
float: left;
clear: left;
text-decoration: none;
color: #EEEEEE;
margin-bottom: 0.25em;
-webkit-transition: color 300ms ease-in-out;
transition: color 300ms ease-in-out;
/*new*/
float: none;
display: block;
text-align: center;
position: relative;
/*new*/
}
.main .bio .bio-link i {
margin-left: 8px;
}
.main .bio .bio-link::after {
display: block;
content: '';
height: 1px;
width: 0;
background: #CA8D6E;
-webkit-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
}
.main .bio .bio-link:hover::after {
width: 100%;
}
.main .bio .bio-link:hover {
color: #CA8D6E;
}
.main .contact {
color: #CA8D6E;
}
@media (min-width: 768px) {
.main {
flex-wrap: nowrap;
}
.main .bio,
.main .contact {
margin: 0;
}
}
.main {
overflow: hidden;
}
演示 2
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.main {
display: -webkit-box;
display: flex;
justify-content: space-around;
-webkit-box-align: baseline;
align-items: baseline;
height: 100vh;
background: linear-gradient(120deg, #383745 50%, #22202B 50%);
}
.main .header,
.main legend.header {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.25rem;
margin: 0.5em 0;
}
.main .bio,
.main .contact {
max-width: 320px;
margin-top: 20vh;
margin: auto;
color:#fff;
}
.main .bio h3{color:#fff;}
.main .bio .profile-img {
max-width: 7em;
border-radius: 50%;
}
.main .bio .bio-link {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1rem;
display: inline-block;
float: left;
clear: left;
text-decoration: none;
color: #EEEEEE;
margin-bottom: 0.25em;
-webkit-transition: color 300ms ease-in-out;
transition: color 300ms ease-in-out;
}
.main .bio .bio-link i {
margin-left: 8px;
}
.main .bio .bio-link::after {
display: block;
content: '';
height: 1px;
width: 0;
background: #CA8D6E;
-webkit-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
}
.main .bio .bio-link:hover::after {
width: 100%;
}
.main .bio .bio-link:hover {
color: #CA8D6E;
}
.main .contact {
color: #CA8D6E;
}
.main {
overflow: hidden;
}
在 Demo 1 中,两个块是垂直和水平对齐的,但是 .bio 容器是中间对齐的,我希望它们与图像的顶角对齐。此外,悬停效果比文本更宽,我不想要。
在演示 2 中,链接按左角对齐,这很好,但这是通过使用
float
实现的,我想去掉它并更改为 flex
。但是,如果我应用 CSS flexbox 来对齐链接,最后一个 FA 图标将被发送到一个新行,这不是我想要的。
同样在演示 2 中,悬停效果如我所期望的那样在最终变体中工作。
我一直在尝试不同的 CSS 属性和值来实现所需的布局,但到目前为止没有成功。我怀疑我在 CSS 布局方面缺乏知识是这里的主要问题,我将不胜感激解决此问题的任何帮助或指导。
提前致谢!