Как я могу получить этот тег div с правой стороны коробки? - PullRequest
Новая
       12

Как я могу получить этот тег div с правой стороны коробки?

0 голосов
/ 26 сентября 2018

enter image description here

   .left {
            width: 50%;
            display: inline-block;
            float: left;
        }

        /* Second user block */
        .right {
            border-color: lightskyblue;
            background-color: darkcyan;
            width: 50%;
            display: inline-block;
            float: right;
        }

Это CSS для упаковщиков, не знаю, почему он все еще не работает.

.boxed {
            border: 2px solid black;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            background-color: darkgoldenrod;
            max-width:800px;
            margin:1rem auto;
            overflow:hidden;
        }

        /* Chat blocks */
        .block {
            border: 2px solid darkgreen;
            background-color: lightgreen;
            border-radius: 30px;
            padding: 10px;
            margin: 10px 0;
            border-radius:20px;
            margin-bottom:10px;
            width:60%;
        }

Я создаю фиктивный пользовательский интерфейс, и я не могу вывести синие пузыри чата с правой стороны, я пытался использовать right: 0px; и float: right;, но оба они не работают,Есть ли другие теги CSS, которые я могу использовать, чтобы правильно расположить его?

Вот теги div: 

<div class="boxed card my-3">

        <h2 align="center">Chat Log:</h2>

         <div class="block left">
            <img src="User1.jpg" alt="FortniteGamer">
            <p>Hey whats up?. Do you want to get a game going?</p>
            <span class="time-right">11:00</span>
        </div>

        <div class="block right">
            <img src="User2.jpg" alt="CODGamer" class="right">
            <p>Hey! Yeah defintely that sounds fun!</p>
            <span class="time-left">11:01</span>
        </div>

        <div class="block left">
            <img src="User1.jpg" alt="FortniteGamer">
            <p>Sweet! Whats your username on fornite?</p>
            <span class="time-right">11:02</span>
        </div>

        <div class="block right">
            <img src="User2.jpg" alt="CODGamer" class="right">
            <p>My username is: CODSav</p>
            <span class="time-left">11:02</span>
        </div>

        </div>

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Кажется, что обертка (.card) является гибким контейнером, и в этом случае плавающие элементы не будут иметь никакого эффекта.

Вместо этого установите противоположное поле на auto: 

.right {
    border-color: lightskyblue;
    background-color: darkcyan;
    width: 50%;
    margin-left:auto;
}
0 голосов
/ 26 сентября 2018

Положите позицию: абсолютное и попробуйте: 

.right {
            position:absolute;
            border-color: lightskyblue;
            background-color: darkcyan;
            width: 50%;
            display: inline-block;
            float: right;
        }
...