Question

我正在尝试使用jquery mobile。在我的页面标题中，我想把两个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>

但按钮始终显示下来。

Answer 1

首先，你的标记中有一些拼写错误：

<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>

您还错过了第二个style的{{1}}部分的右括号。

其次，您将背景图片大小设置为100％，这意味着它将占据宽度的100％，而不会为您的其他div元素留下空间。减少第一个div的宽度，第二个将落实到位。

这是一个小提琴：http://jsfiddle.net/2xs24/

Answer 2

因为你将第一个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>

两个div在同一条线上

2 个答案: