4个居中且相等大小的div +右上底部链接
[英]4 centered and equalsize div + top right bottom link
问题描述
I created a 4 column (almost) centered html as a presentation of my website, now I want to add a new div with link floating in the bottom right part of the page, my problem is the element is entering as a new column and center is not correct or getting bad position: 
我创建了一个4列（几乎）居中的html作为我网站的演示文稿，现在我想添加一个新的div，其链接浮动在页面右下角，我的问题是该元素正在作为新的列和中心输入不正确或位置不良：
.init {
height: 100%;
position: absolute;
top 0px;
bottom 0px;
float: right;
background: yellow;
margin-left: 15px;
font-weight: 700;
text-align: right;
color: red;
}
Here is a fiddle where you can see the issue: https://jsfiddle.net/0rtvcnon/1/ 这是您可以看到问题的小提琴： https : //jsfiddle.net/0rtvcnon/1/
Basically my question is how to center 4 columns AND put the ENTER link floating in the bottom rigth... Something like this 基本上我的问题是如何将4列居中并将ENTER链接浮动在底部rigth中……
PS: I use percentage and margin to center columns but if there is a better way I can change it PS：我使用百分比和边距将列居中，但是如果有更好的方法可以更改它
2 个解决方案
解决方案1
1 2017-06-19 18:15:28
You can add display: flex to the parent to put them in a flex row then use align-items: flex-end to align everything to the bottom and remove height: 100% from .init so it moves to the bottom. 您可以将display: flex添加到父级，以将它们放在flex row然后使用align-items: flex-end将所有内容对齐到底部，并从.init删除height: 100% ，以便将其移到底部。 I would also use flex-basis for the width on .bar 我还将在.bar flex-basis使用flex-basis作为宽度
html, body { width: 80%; height: 100%; padding: 0; margin: auto; background: yellow; text-align: center; font: normal 16px 'Roboto', sans-serif; } .bar { flex: 1 0 0; background: red; font-weight: 700; text-align: center; color: yellow; } .bar:not(:first-child) { margin-left: 15px; } .init { background: yellow; font-weight: 700; text-align: right; color: red; position: absolute; bottom: 0; left: calc(100% + 15px); } ::-moz-selection { color: yellow; background: red; } ::selection { color: yellow; background: red; } p.numbers { font-size: 5em; } p.meta, p.strings { font-size: 1.5em; } h1 { font-size: 4.5em; } .wrap { display: flex; position: relative; height: 100%; }
<div class="wrap"> <div class="bar"> <p id="d" class="numbers">00</p><br> <p class="strings">D</p><br> </div> <div class="bar"> <p id="h" class="numbers">00</p><br> <p class="strings">H</p><br> </div> <div class="bar"> <p id="m" class="numbers">00</p><br> <p class="strings">M</p><br> </div> <div class="bar"> <p id="s" class="numbers">00</p><br> <p class="strings">S</p><br> </div> <div class="init"> <div class="z">ENTRA</div> </div> </div>
解决方案2
1 已采纳 2017-06-19 18:19:57
.init {
position:absolute;
bottom:0;
right:0;
background: yellow;
margin-left: 15px;
font-weight: 700;
text-align: right;
color: red;
}
Here's a link to the updated fiddle https://jsfiddle.net/0rtvcnon/2/ 这是更新的小提琴的链接https://jsfiddle.net/0rtvcnon/2/
html, body { padding: 0px; width: 80%; height: 100%; margin: auto auto; padding-left:1%; background: yellow; font: normal 16px 'Roboto', sans-serif; } .bar { width: 20%; height: 100%; float: left; background: red; margin-left: 2%; margin-right:2%; font-weight: 700; text-align: center; color: yellow; } .init { position:absolute; bottom:0; right:0; background: yellow; margin-left: 0px; font-weight: 700; text-align: right; color: red; } ::-moz-selection { color: yellow; background: red; } ::selection { color: yellow; background: red; } p.numbers { font-size: 5em; } p.meta, p.strings { font-size: 1.5em; } h1 { font-size: 4.5em; }
<body> <div class="bar"> <p id="d" class="numbers">00</p><br> <p class="strings">D</p><br> </div> <div class="bar"> <p id="h" class="numbers">00</p><br> <p class="strings">H</p><br> </div> <div class="bar"> <p id="m" class="numbers">00</p><br> <p class="strings">M</p><br> </div> <div class="bar"> <p id="s" class="numbers">00</p><br> <p class="strings">S</p><br> </div> <div class="init"> <div class="z">ENTRA</div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.