Я не могу получить свой div до go до самого правого - PullRequest
Новая
       0

Я не могу получить свой div до go до самого правого

1 голос
/ 09 апреля 2020

Я пробовал 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 ]

2 голосов
/ 09 апреля 2020

Вы можете использовать flexbox для него, и избегать использовать абсолютную позицию. Попробуйте как в моем фрагменте: 

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>
0 голосов
/ 09 апреля 2020

Свойство float игнорируется в контейнере flex.

Проблема в вашем коде, который вы объявили flex в теле float, не создавайте плавающий элемент flex *

Проверьте, что ваша проблема решена, надеюсь, это поможет вам: 

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;
    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";
    float:left;
    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";
    float: right;
    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>
0 голосов
/ 09 апреля 2020

Я не могу комментировать, потому что слишком низкая репутация, но я думаю, что вы забыли разместить свои ящики. Вы используете правые и левые свойства, хотя. 

.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;
}
0 голосов
/ 09 апреля 2020

Вы пытались использовать что-то под названием "FlexBox"? Избегайте использования поплавка. И правильно: 0 будет работать, только если у вашего родительского div есть позиция: относительная;.

Предложите дать родительскую div-позицию: flex, и ваш ребенок должен иметь justify-content: flex-end; Это автоматически выведет sh все дочерние деления вправо.

Для получения дополнительной информации: Вот быстрый 100 se c. видео о том, как его использовать: https://www.youtube.com/watch?v=K74l26pE4YA

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...