gpt4 book ai didi

html - CSS 页脚格式

转载 作者:行者123 更新时间:2023-11-28 04:52:54 25 4
gpt4 key购买 nike

我的 CSS 页脚有几个问题。请在整页中运行此代码段以查看它在更大的显示器上的布局(稍后我将使其响应。现在,请只使用整页)。

.small col-md-3 {
font-size: .8em
}
.footer-distributed {
background-color: #34385E;
width: 100%
}
.footer-distributed .footer-links {
color: #ffffff;
}
.footer-distributed .footer-links a {
line-height: 1.8;
color: inherit;
padding: 0 2em;
}
.footer-distributed .footer-left-bar {
border-left: solid;
color: #FFFFFF;
}
footer {
position: fixed;
bottom: 0;
}
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
</head>

<body>
<footer class="footer-distributed">
<div class="row" style="height: 1em"></div>
<div class="row">
<div class="col-md-3">
<p class="footer-links">
<a href="#">Link Number 123</a>
<a href="#">Link Number 2</a>
<a href="#">Link Number 3</a>
<a href="#">Link Number 4</a>
</p>
</div>
<div class="col-md-6 footer-left-bar">
<div class="row footer-links">
<div class="col-md-6">
<p>This information is</br>
always three</br>
lines long
</p>
</div>
</div>
</div>
<div class="col-md-3 footer-left-bar">
<div class="row footer-links">
<div class="col-md-6">BRANDING 1</div>
<div class="col-md-6">BRANDING 2</div>
</div>
</div>
</div>
<div class="row" style="height: 1em"></div>
</footer>

</html>

  1. 左侧的 4 个链接。我希望它们位于 2x2 网格的左对齐单元格中,无论文本在其中有多长。如您所见,链接 2 被推到右侧,因为链接编号 123 太长。

  2. 右侧的 2 品牌链接。我希望它们并排并垂直居中,以便白色分隔条与中心列左侧较长的白色分隔条相匹配。

任何人都可以提供有关如何完成此操作的任何提示吗?谢谢!!

最佳答案

嗯...我想评论/答案已被删除。但是,效果很好!建议是:

  1. 在左侧使用 2/2 的行和列网格来隔开元素。
  2. 在中心 block 的两侧使用白色边距线,而不是试图在中心和右侧做左边距线 block 。

垂直居中仍然不是很好,所以我可能会弄乱其他答案来尝试一下。谢谢!

关于html - CSS 页脚格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40594762/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com