Question

我创建了一个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;
}

这是一个小提琴，你可以看到问题：https://jsfiddle.net/0rtvcnon/1/

基本上我的问题是如何居中4列并将ENTER链接浮动在底层...这样的东西

PS：我使用百分比和边距来居中列，但如果有更好的方法我可以改变它

Answer 1

您可以将display: flex添加到父级，以便将它们置于弹性row中，然后使用align-items: flex-end将所有内容与底部对齐，并从{{1}中删除height: 100%所以它移到了底部。我还会使用.init作为flex-basis

的宽度

＆＃13;

.bar

＆＃13;

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%;
}

＆＃13;

Answer 2

.init {
   position:absolute;
   bottom:0;
   right:0;
   background: yellow;
   margin-left: 15px;
   font-weight: 700;
   text-align: right;
   color: red;
}

这是更新小提琴的链接 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>

4居中并且等于div +右上角的底部链接

2 个答案: