0

画像、テキスト、表の 3 つの列を持つリスト アイテムがあります。それらはすべてフロート左です。リスト項目にクラス「.Image」の div が含まれているかどうかを検出する必要があります。この div が存在しない場合は、クラス「.Text」の div の幅を変更する必要があります。

以下にコードと JSFIDDLE を添付しました。オプション 2 は、「div.Image」インスタンスがないことを検出し、「div.Text」のサイズを 450px に変更する必要があるオプションです。

JSFIDDLE

jQuery:

$(document).ready(function(){
    $('.Image').each().parent().find('div.Text').width(450);
});

CSS:

#listingItem{width:660px; background-color:#666666;}
.Image{width:100px;float:left; background-color:#cccccc; height:200px; padding:10px;}
.Text{width:350px;float:left;background-color:#666666; color:#FFFFFF; height:200px;padding:10px;}
.Table{width:150px; float:left;background-color:#999999; height:200px;padding:10px;}
.clr{clear:both;}
table tr td{color:#FFFFFF;}

HTML:

<h2>OPTION 1</h2>
<div id="listingItem">
    <div class="Image"><img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F1%2F6%2F4%2F9%2Fteaser_164977.jpg/NJznvEm71tK4eSpZVLEFZA%3D%3D/128,128/6/Holiday_Inn_MIAMI_BEACH-OCEANFRONT-Miami_Beach-Exterior_view-5-164977.jpg" width="100" /></div>
    <div class="Text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla sagittis iaculis. Etiam tincidunt egestas urna, et congue lorem elementum eget. Morbi sed nibh rutrum, pulvinar metus a, bibendum purus. In porttitor ornare massa et dapibus. Duis tempor facilisis ipsum, sed tempus mauris ornare id. Donec in consequat est. Nunc pulvinar nibh in lorem suscipit, at eleifend tellus dictum. Proin congue leo eu dui feugiat condimentum. Sed sagittis sagittis consectetur. Quisque ut ultrices erat.
    </div>
    <div class="Table">
        <table cellspacing="0" cellpadding="5" border="0" width="150">
            <tr>
                <td bgcolor="#b22222">
                    CONTENT
                </td>
            </tr>
        </table>
    </div>
    <div class="clr"></div>
</div>

<h2>OPTION 2</h2>

<div id="listingItem">
    <div class="Text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla sagittis iaculis. Etiam tincidunt egestas urna, et congue lorem elementum eget. Morbi sed nibh rutrum, pulvinar metus a, bibendum purus. In porttitor ornare massa et dapibus. Duis tempor facilisis ipsum, sed tempus mauris ornare id. Donec in consequat est. Nunc pulvinar nibh in lorem suscipit, at eleifend tellus dictum. Proin congue leo eu dui feugiat condimentum. Sed sagittis sagittis consectetur. Quisque ut ultrices erat.
    </div>
    <div class="Table">
        <table cellspacing="0" cellpadding="5" border="0" width="150">
            <tr>
                <td bgcolor="#b22222">
                    CONTENT
                </td>
            </tr>
        </table>
    </div>
    <div class="clr"></div>
</div>

ご回答ありがとうございます。

4

4 に答える 4

0

またはhttp://jsfiddle.net/C7fQ8/

$(document).ready(function () {
    $('.listingItem:not(:has(.Image)) .Text').width(470);
});

画像 div のパディングを考慮した幅 470

于 2013-07-10T16:11:54.753 に答える