1

我正在使用库存 2 列 JQuery 移动布局“ui-grid-a”。

为什么这行得通

<div data-role="page">
<div data-role="content">
    <div class="ui-grid-a"> <!-- ui-grid-a is a preset 2 column layout in JQuery Mobile -->
        <div class="ui-block-a"><!-- ui-block-a is a preset block in JQuery Mobile, it denotes the left column -->
            <img src="images/a.jpg" style="width:100%" />
        </div>
        <div class="ui-block-b"><!-- Right column -->
            <p>Right column...</p>
        </div>
    </div>
</div>

然而这并不...

<HEAD>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style type="text/css">
.full-image
{
    width:100%;
}
</style>
</HEAD>

<BODY>
<div data-role="page">
<div data-role="content">
    <div class="ui-grid-a"> <!-- ui-grid-a is a preset 2 column layout in JQuery Mobile -->
        <div class="ui-block-a"><!-- ui-block-a is a preset block in JQuery Mobile, it denotes the left column -->
            <img src="images/a.jpg" class="full-image" />
        </div>
        <div class="ui-block-b"><!-- Right column -->
            <p>Right column...</p>
        </div>
    </div>
</div>

此外，直接在 img 上使用 css (img { width: 100% }) 也不起作用。

4

0 回答 0