我正在尝试在我的单页网站页脚的某些文本的两侧对齐x2社交媒体图标。
以下是我希望它在桌面/宽屏幕上显示的示例。Desktop/Wide Screens
以下是我希望它如何在移动/窄屏幕上显示的示例。 Mobile/Narrower Screens
我已经输入了我到目前为止的代码(目前没有社交媒体图标)
P.S。我的社交媒体图标保存为facebook.png和twitter.png
body {
background-color: #000;
font-family: 'Roboto Mono', 'Arial', sans-serif;
font-size: 250%;
font-weight: 300;
}
.logo {
display: block;
margin: 50px auto;
}
p {
color: #ccc;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
}
.coming-soon {
color: #333;
letter-spacing: 3px;
}
.autumn-2017 {
color: #ccc;
}
section p {
display: block;
margin: 50px auto 10px;
font-size: 35%;
text-transform: none;
letter-spacing: 3px;
line-height: 25px;
color: #333;
}
.contact-info {
margin: 15px auto;
letter-spacing: 3px;
line-height: 25px;
color: #ccc;
text-decoration: none;
text-transform: none;
font-size: 35%;
}
a:link,
a:visited {
text-decoration: none;
color: #ccc;
transition: font-weight 0.2s;
}
a:hover,
a:active {
text-decoration: none;
color: #ccc;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="desctription" content="Web Design & Development">
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="grid.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="queries.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700" rel="stylesheet">
<meta name="msapplication-config" content="resources/favicons/browserconfig.xml">
</head>
<body>
<header>
<div>
<img src="iz-icon-logo.png" class="logo" alt="logo">
<p><span class="coming-soon">coming soon.</span><span class="autumn-2017"> autumn 2017.</span></p>
</div>
</header>
<section>
<div>
<p>If you have a Web Design or Development enquiry,<br>please contact:</p>
<p class="contact-info"><a href="mailto:webmaster@example.com">hello@illusionzero.co.uk</a><br><a href="tel:07903490453">+44 (0) 7903 490453</a></p>
</div>
</section>
</body>
</html>
答案 0 :(得分:1)
可以使用Flexbox并正确使用@media查询和order属性来实现:
您可以查看此JSFiddle以使用浏览器尺寸。
footer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
footer p {
margin: 0 30px;
}
@media (max-width: 480px) {
footer {
flex-direction: column;
}
footer i{
order: 2;
}
}
<footer>
<i>icon one</i>
<p>links</p>
<i>icon two</i>
</footer>
答案 1 :(得分:0)
你可以使用css position属性
body {
background-color: #000;
font-family: 'Roboto Mono', 'Arial', sans-serif;
font-size: 250%;
font-weight: 300;
}
.logo {
display: block;
margin: 50px auto;
}
p {
color: #ccc;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
}
.coming-soon {
color: #333;
letter-spacing: 3px;
}
.autumn-2017 {
color: #ccc;
}
section p {
display: block;
margin: 50px auto 10px;
font-size: 35%;
text-transform: none;
letter-spacing: 3px;
line-height: 25px;
color: #333;
}
.contact-info {
margin: 15px auto;
letter-spacing: 3px;
line-height: 25px;
color: #ccc;
text-decoration: none;
text-transform: none;
font-size: 35%;
}
a:link,
a:visited {
text-decoration: none;
color: #ccc;
transition: font-weight 0.2s;
}
a:hover,
a:active {
text-decoration: none;
color: #ccc;
font-weight: 500;
}
/* NEW CSS */
.footer-container{
position:relative;
padding:0 50px;
text-align:center;
max-width:300px;
margin:0 auto;
}
.ico{
background-color:#333;
display:inline-block;
width:36px;
height:36px;
line-height:36px;
font-size:12px;
text-align:center;
border-radius:36px;
color:#FFF;
position:absolute; top:50%; margin-top:-18px;
}
.fb{ left:0; }
.tw{ right:0; }
@media (max-width: 768px) {
.footer-container{ padding:0; }
.ico{ position:static; margin-top:0px; }
}
&#13;
<header>
<div>
<img src="iz-icon-logo.png" class="logo" alt="logo" />
<p>
<span class="coming-soon">coming soon.</span><span class="autumn-2017"> autumn 2017.</span>
</p>
</div>
</header>
<section>
<div>
<p>If you have a Web Design or Development enquiry,<br>please contact:</p>
<div class="footer-container">
<p class="contact-info">
<a href="mailto:webmaster@example.com">hello@illusionzero.co.uk</a><br>
<a href="tel:07903490453">+44 (0) 7903 490453</a>
</p>
<span class="ico fb">Fb</span>
<span class="ico tw">Tw</span>
</div>
</div>
</section>
&#13;