Question

我需要将promo div放在alert div的右侧，就像这样：

请知道，一些CSS专家可以帮助我使用此代码：https://jsfiddle.net/08rnpxbt/4/

＆＃13;

body {
    width:640px;
    float:left;
    margin:0 6px 0 6px;
    padding:18px;
    font-family:Arial, Helvetica, sans-serif;
}
p { 
    padding:0;
    margin:8px 0 0 0;
}
div.alert {
    padding:8px 12px 8px 12px;
    margin:20px auto 20px auto;
    text-align:justify;
    border:2px solid #389CF2;
    border-radius:8px;
    background-color:#F5F5F5;
    background-image:url(http://i61.tinypic.com/1oxi50.png);
    background-repeat:no-repeat;
    background-position:8px 11px;
}
div.alert span {
    display:block;
    //float:left;
    padding-bottom:2px;
    margin-left:40px;
    font-size:15px;
    line-height:1.3em;
    color:#5C5C5C;
}
div#promo {
    display:block;
    width:80px;
    height:32px;
    padding:4px 2px 2px 2px;
    text-align:center;
    line-height:15px;
    font-size:14px;
    color:#FF0000;
    border:2px dotted #585858;
    border-radius:16px;
    background-color: #FFFFD5;
}

＆＃13;

<body>
<div class="alert" style="width:530px; margin:0 auto 10px auto;">
    <span>
        <b>Windows 7 Home Premium - 02 License(s)</b><br>
        Price: U$ 225.00 up to 10X or R$ 210.00 in cash
    </span>
    <div id="promo">15,00% de desconto !</div>
</div>
</body>

＆＃13;

Answer 1

只需将此CSS规则添加到#promo元素：

#promo{
    float: right;
}

并在CSS中更改此内容：

div.alert span{
    display: inline-block;
}

如果你没有＆＃39;设置inline-block #promo会像以前一样在新行中断。

试试here

Answer 2

您可以为此

使用flexbox属性

只需添加display:flex和justify-content:space-between

即可

div.alert {
    display:flex;
    justify-content:space-between;
    padding:8px 12px 8px 12px;
    margin:20px auto 20px auto;
    text-align:justify;
    border:2px solid #389CF2;
    border-radius:8px;
    background-color:#F5F5F5;
    background-image:url(http://i61.tinypic.com/1oxi50.png);
    background-repeat:no-repeat;
    background-position:8px 11px;
}

将DIV与SPAN并排放置在另一个DIV内

2 个答案: