在同一行上的兩個div

我正在嘗試使用jquery mobile。在我的頁眉中，我想把兩個div放在一起（在同一行上），剩下一個會包含背景圖片，右邊有一些按鈕。所以我試了在同一行上的兩個div

<div class="ui-block-a" style="background-image:url('/img/someImg.png'); width:100%;height:50px; style="float:left;"> LEFT </div> 
<div class="ui-block-b" style="float:right;> 
    <a href="" data-role="button" data-theme="d">button on the right </a> 
</div>

但按鈕總是顯示下來。

來源

2014-03-18 user1765862

首先，你有一些錯別字在您的標記：

<div class="ui-block-a" style="background-image:url('/img/someImg.png'); width:100%;height:50px; style="float:left;"> LEFT </div>

應該是：

<div class="ui-block-a" style="background-image:url('/img/someImg.png'); width:100%;height:50px;float:left;"> LEFT </div>

您還對你的第二個div的style部分缺少一個右括號。

其次，你的背景圖像大小設置爲100％，這意味着它將佔用100％的寬度，不會留下任何剩餘空間用於其他div元素。減少第一個div的寬度，第二個將落到位。

這裏是一個小提琴：http://jsfiddle.net/2xs24/

來源

2014-03-18 21:10:39

這是因爲你是第一個div的寬度設置爲100％，也有錯字，試試這個

<div class="ui-block-a" style="background-image:url('/img/someImg.png'); width:50%;height:50px;float:left;"> LEFT </div> 
    <div class="ui-block-b" style="float:left;> 
     <a href="" data-role="button" data-theme="d">button on the right </a> 
    </div>

來源

2014-03-18 21:18:51 Zahoor

在同一行上的兩個div

回答

相關問題