我不能让我的div一直到右边
我不能让我的div一直到右边
提问于 2020-04-10 01:29:02
我已经尝试了float: right，right: 0，text-align: right，设置宽度，但我不能得到任何东西来修复它。左边的框应该在左上角，右边的框应该在右上角。
function GetClock() {
var d = new Date();
var nmonth = d.getMonth(),
ndate = d.getDate(),
nyear = d.getFullYear();
var nhour = d.getHours(),
nmin = d.getMinutes(),
nsec = d.getSeconds();
if (nmin <= 9) nmin = "0" + nmin;
if (nsec <= 9) nsec = "0" + nsec;
if (nhour <= 9) {
nhour = "0" + nhour
}
var clockTime = nhour + ":" + nmin + ":" + nsec;
var clockDate = (nmonth + 1) + "/" + ndate + "/" + nyear;
document.getElementById('clocktime').innerText = clockTime;
// document.getElementById('clockdate').innerText = clockDate;
}
GetClock();
setInterval(GetClock, 1000);html {
background-color: #2b3e50;
color: #ededed;
}
body {
color: white;
display: flex;
position: fixed;
margin: 0px;
}
footer {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
font-size: 9pt;
}
a {
color: white
}
.timeBox {
color: black;
background-color: white;
font-family: "seven-seg";
font-size: 20pt;
padding-left: 13px;
padding-top: 7.5px;
padding-right: 20px;
padding-bottom: 7.5px;
border-right-style: solid;
border-bottom-style: solid;
border-width: 5px;
border-radius: 0px 0px 25px 0px;
left: 0;
max-height: 30px;
}
.tempBox {
color: black;
background-color: white;
font-family: "seven-seg";
font-size: 20pt;
padding-left: 13px;
padding-top: 7.5px;
padding-right: 20px;
padding-bottom: 7.5px;
border-left-style: solid;
border-bottom-style: solid;
border-width: 5px;
border-radius: 0px 0px 0px 25px;
text-align: center;
right: 0;
max-height: 30px;
}<body>
<div class="timeBox">
<div style="width: 71px;">
<!--Clock (Time&Date)-->
<div id="clocktime"></div>
<script src="clock.js"></script>
</div>
</div>
<div class="tempBox">
<div style="width: 71px;">
<div id="tempBox"></div>
</div>
</div>
</body>
回答 4
Stack Overflow用户
发布于 2020-04-10 01:42:42
你可以使用flexbox，并避免使用位置绝对。在我的代码片段上尝试like：
function GetClock() {
var d = new Date();
var nmonth = d.getMonth(),
ndate = d.getDate(),
nyear = d.getFullYear();
var nhour = d.getHours(),
nmin = d.getMinutes(),
nsec = d.getSeconds();
if (nmin <= 9) nmin = "0" + nmin;
if (nsec <= 9) nsec = "0" + nsec;
if (nhour <= 9) {
nhour = "0" + nhour
}
var clockTime = nhour + ":" + nmin + ":" + nsec;
var clockDate = (nmonth + 1) + "/" + ndate + "/" + nyear;
document.getElementById('clocktime').innerText = clockTime;
document.getElementById('clockdate').innerText = clockDate;
}
GetClock();
setInterval(GetClock, 1000);body {
/*color: white;*/
margin: 0px;
padding: 0;
}
.timeBox {
color: black;
background-color: white;
font-family: "seven-seg";
font-size: 20pt;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.tempBox {
color: black;
background-color: white;
font-family: "seven-seg";
font-size: 20pt;
padding-left: 13px;
padding-top: 7.5px;
padding-right: 20px;
padding-bottom: 7.5px;
border-left-style: solid;
border-bottom-style: solid;
border-width: 5px;
border-radius: 0px 0px 0px 25px;
text-align: center;
max-height: 30px;
}
.tmbxItem{
padding-left: 13px;
padding-top: 7.5px;
max-width: 146px;
padding-right: 20px;
padding-bottom: 7.5px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 5px;
border-radius: 0 0 25px 25px;
}<body>
<div class="timeBox">
<div id="clocktime" class="tmbxItem"></div>
<div id="clockdate" class="tmbxItem"></div>
</div>
</body>
Stack Overflow用户
发布于 2020-04-10 01:42:52
你试过使用名为"FlexBox“的东西吗？避免使用浮动。和right:0仅当您的父div具有position:relative；时才有效。
建议给出父div的位置:flex，你的孩子应该有justify content: flex-end；这会自动将所有的子div推到右边。
更多信息:这里是一个快速的100秒。如何使用的视频：https://www.youtube.com/watch?v=K74l26pE4YA
Stack Overflow用户
发布于 2020-04-10 01:48:04
我不能评论，因为太低的声誉，但我想你忘了放置你的盒子。不过，您可以使用right和left属性。
.timeBox {
color: black;
background-color: white;
font-family: "seven-seg";
font-size: 20pt;
padding-left: 13px;
padding-top: 7.5px;
padding-right: 20px;
padding-bottom: 7.5px;
border-right-style: solid;
border-bottom-style: solid;
border-width: 5px;
border-radius: 0px 0px 25px 0px;
left: 0; /* not necessary (can be removed) */
max-height: 30px;
}
.tempBox {
color: black;
background-color: white;
font-family: "seven-seg";
font-size: 20pt;
padding-left: 13px;
padding-top: 7.5px;
padding-right: 20px;
padding-bottom: 7.5px;
border-left-style: solid;
border-bottom-style: solid;
border-width: 5px;
border-radius: 0px 0px 0px 25px;
text-align: center;
right: 0; /* work only on positioned element */
position: fixed; /* try this */
max-height: 30px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61126825
复制相关文章
相似问题
腾讯云开发者
