Question

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

我正在制作一个模拟UI，我似乎无法使蓝色聊天气泡出现在右侧，我尝试使用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>

Answer 1

包装器（.card）似乎是一个伸缩容器，在这种情况下，浮点数不会产生任何作用。

相反，将相反的边距设置为auto：

.right {
    border-color: lightskyblue;
    background-color: darkcyan;
    width: 50%;
    margin-left:auto;
}

Answer 2

放置位置：绝对并尝试：

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

如何将这个div标签添加到框的右侧？

2 个答案: