Question

这是我的CSS代码。有两个div和两个img，因此左侧有一个div消息，右侧有div消息2。但它在底部我希望它在div消息旁边的左侧。

谢谢！

我使用的HTML代码和此处是我迄今为止尝试过的代码片段：

＆＃13;

zsh

＆＃13;

 .photo{
         height: 70px;
        width: 70px;
        border: 1px solid white;
        border-radius: 90px;
        position: absolute;
        margin-top: 20px;
        right: 55%;
    }
    .massege2{
         background-color: whitesmoke;
        width: 200px;
        overflow-wrap: break-word;
        border: 1px solid red;
        border-radius: 20px;
        margin-left: 65%;
        min-height: 11%;
        margin-top: 30px;
        font-family: 'Berkshire Swash', cursive;
    }
    .photo2{
        height: 70px;
        width: 70px;
        border: 1px solid white;
        border-radius: 90px;
        position: absolute;
        margin-top: 20px;
        right: 1px;
    }
    .massege{
        background-color: whitesmoke;
        width: 200px;
        overflow-wrap: break-word;
        border: 1px solid red;
        border-radius: 20px;
        margin-left: 10%;
        min-height: 11%;
        margin-top: 30px;
        font-family: 'Berkshire Swash', cursive;
    }

＆＃13;

Answer 1

你的div在不同的行上，因为它们默认为display: block。您可以将其显示属性设置为内联块以解决您的问题。我以更合理的方式重写了你的代码。没有必要像你那样为每个消息元素或照片元素创建一个新类。它会引导您重复编码。你可以用一个普通的类来做。 HTML：

<div class="conversation">
    <div class='message'>
        <img src='../images/photo.png' class='message-photo'>
        <p class='date'>2018-Jan-Sun -- 06-18-58</p>
        <hr style='border: 1px solid black'>
        <p>hi</p>
    </div>
    <div class='message'>
        <img src='../images/photo.png' class='message-photo'>
        <p class='date'>2018-Jan-Sun -- 06-18-58</p>
        <hr style='border: 1px solid black'>
        <p>hi</p>
    </div>
</div>

CSS

.message{
    /* position: relative lets us position .message-photo elements relative to the .message elements */
    position: relative;
    /* display: inline-block lets us keep the divs on the same line */
    display: inline-block;
    background-color: whitesmoke;
    width: 200px;
    overflow-wrap: break-word;
    border: 1px solid red;
    border-radius: 20px;
    min-height: 11%;
    margin-top: 30px;
    font-family: 'Berkshire Swash', cursive;
    display: inline-block;
}

.message-photo{
    height: 70px;
    width: 70px;
    border: 1px solid white;
    border-radius: 90px;
    position: absolute;
    margin-top: 20px;
    right: 1px;
}

把Div放在Div旁边

1 个答案: