html - <div >'s not appearing in a ' 堆栈'

Question

很抱歉，如果有人问过这个问题，但我发现在我的案例中没有任何效果。

这是我当前的代码。我在那里包含了更详细的问题，但基本上我的一些元素没有出现或出现在不需要的位置。

https://jsfiddle.net/9e8tffh5/2/

        <div class="chat">
            <div class="bar">
                <div class="title">
                    <span class="name">Random Chat</span>
                </div>
            </div>
            <div class="options">

            </div>
            <div class="room">
                <div class="post other" id="1">
                    <div class="content">
                        <span class="note">Hi there!</span>
                    </div>
                    <div class="details">
                        <div class="poster">
                            <span class="name">Bob</span>
                        </div>
                        <div class="time">
                            <span class="time">9:32</span>
                        </div>
                    </div>
                </div>
                <div class="post self" id="2">
                    <div class="content">
                        <span class="note">Hi Bob</span>
                    </div>
                    <div class="details">
                        <div class="time">
                            <span class="time">12:32</span>
                        </div>
                    </div>
                </div>
                <div class="post self" id="3">
                    <div class="content">
                        <span class="note">How are you doing?</span>
                    </div>
                    <div class="details">
                        <div class="time">
                            <span class="time">9:33</span>
                        </div>
                    </div>
                </div>
                <div class="post other" id="4">
                    <div class="content">
                        <span class="note">Great!</span>
                    </div>
                    <div class="details">
                        <div class="poster">
                            <span class="name">Bob</span>
                        </div>
                        <div class="time">
                            <span class="time">9:32</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="message">
                <div class="input">
                    <input type="text" placeholder="Send a message" />
                </div>
            </div>
        </div>

Answer 1

fiddle

.chat .room .self {
  /* position: absolute;
  right: 8px; */

  text-align: right;
}

.chat .room .self .details {
  /* position: absolute;
  right: 8px; */

  text-align: right;
}