將 DIV 與 SPAN 並排放置在另一個 DIV 內
[英]Place a DIV side by side with a SPAN, inside another DIV
問題描述
我需要將promo div 放在alert div 的右側，就像這樣：
請一些 CSS 專家幫我處理這段代碼： https : //jsfiddle.net/08rnpxbt/4/
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; }
<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>
2 個解決方案
解決方案1
2 已采納 2015-10-07 18:46:36
只需將此 CSS 規則添加到您的#promo元素：
#promo{
float: right;
}
並在您的 CSS 中更改它：
div.alert span{
display: inline-block;
}
如果您不設置inline-block ， #promo將像以前一樣換行。
在這里試試
解決方案2
0 2015-10-07 18:47:32
您可以為此使用 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;
}
另一個 Div1 內的 Div2。 如何讓這些 Div1 和 Div2 並排出現
[英]Div2 inside another Div1. How to make these Div1 and Div2 to be appeared side by side
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.