我正在使用Wordpress。
CSS:
fsrep-main-image {
float: left;
margin-right: 8px;
text-align: center;
overflow: hidden
}
fsrep-main-image img {
padding: 1px;
border: 1px solid #CCC;
float:left;
overflow:hidden
}
description {
display:-block;
margin-top:-150px
}
当我在Firefox中打开页面时,它运行正常,但如果我在Chrome中打开同一页面则会出现问题。
以下图片来自Firefox,但在Chrome中,描述,位置和卧室的详细信息会显示在图片上。
HTML / PHP :
<?php
$PageContent = '<hr/>';
$WPUploadDir = wp_upload_dir();
$FSREPShowMap = $FSREPconfig['GoogleMap'];
if (isset($FSREPMap)) {
if ($FSREPMap == FALSE) {
$FSREPShowMap = FALSE;
}
}
$ListingDetails = $wpdb->get_row("SELECT * FROM ".$wpdb->prefix."fsrep_listings WHERE listing_id = ".$ListingID[0]);
if ($ListingDetails->listing_address_number == '' || $ListingDetails->listing_address_street == '' || $ListingDetails->listing_address_city == '') { $FSREPShowMap = FALSE; }
if ($FSREPconfig['DisplayCurrency'] == 'Yes') { $CurrencyDisplay = ' '.$FSREPconfig['CurrencyType']; } else { $CurrencyDisplay = ''; }
$PageContent .= '<h1>'.fsrep_listing_name_gen($ListingDetails->listing_id, $FSREPconfig['ListingNameDisplay']).'</h1>';
if ($ListingDetails->listing_price_num != '0.00') { $PageContent .= '<span class="listingprice">'; if ($FSREPconfig['ListingPriceID'] != '') { $PageContent .= fsrep_text_translator('FireStorm Real Estate Plugin', $FSREPconfig['ListingPriceID'].' Label', $FSREPconfig['ListingPriceID']).' '; } $PageContent .= $FSREPconfig['Currency'].fsrep_currency_format($ListingDetails->listing_price_num).$CurrencyDisplay.'</span><br />'; }
$PageContent .= '';
$FSREPImageSizes = fsrep_image_sizes();
$FSREPMainImageMargin = $FSREPImageSizes->main[0] + 4;
$FSREPImageMargin = $FSREPImageSizes->main[0] + 2;
$PageContent .='<div id="vertical_menu" style="float:right">
<a onclick=show_desc()>Overview</a>
<hr/>
<a onclick=show_Location()>Location Map</a>
<hr/>
<a onclick=show_enquiry()>Enquiry</a>
</div>';
$PageContent .= '<div id="fsrep-images" style="display:block">';
if (file_exists($WPUploadDir['basedir'].'/fsrep/houses/large/'.$ListingDetails->listing_id.'.jpg')) {
$PageContent .= '<div id="fsrep-main-image" style="width: '.$FSREPMainImageMargin.'px;display:block"><a id="fsrep-main-image-a" href="'.$WPUploadDir['baseurl'].'/fsrep/houses/large/'.$ListingDetails->listing_id.'.jpg" title="View Slideshow" class="thickbox" rel="fsreplisting"><img id="fsrep-main-image-img" src="'.$WPUploadDir['baseurl'].'/fsrep/houses/'.$ListingDetails->listing_id.'.jpg" alt="'.strip_tags(fsrep_listing_name_gen($ListingDetails->listing_id, $FSREPconfig['ListingNameDisplay'])).'" /></a></div>';
}
$PageContent .= '<div id="fsrep-aimages" style="margin-left: '.$FSREPImageMargin.'px; display:block">';
for ($i=1;$i<=50;$i++) {
if (file_exists($WPUploadDir['basedir'].'/fsrep/houses/additional/small/'.$ListingDetails->listing_id.'-'.$i.'.jpg')) {
//$PageContent .= '<div class="fsrep-aimage" id="fsrep-aimage" style="display:block"><a href="'.$WPUploadDir['baseurl'].'/fsrep/houses/additional/large/'.$ListingDetails->listing_id.'-'.$i.'.jpg" title="View Slideshow" class="thickbox" rel="fsreplisting" onmouseover="document.getElementById(\'fsrep-main-image-img\').src=\''.$WPUploadDir['baseurl'].'/fsrep/houses/additional/'.$ListingDetails->listing_id.'-'.$i.'.jpg\'; document.getElementById(\'fsrep-main-image-a\').rel=\'fsreplisting\'"><img src="'.$WPUploadDir['baseurl'].'/fsrep/houses/additional/small/'.$ListingDetails->listing_id.'-'.$i.'.jpg" class="full" /></a></div>';
}
}
$PageContent .= '</div>';
if (file_exists($WPUploadDir['basedir'].'/fsrep/houses/large/'.$ListingDetails->listing_id.'.jpg')) {
//$PageContent .= '<div class="fsrep-aimage" id="fsrep-aimage" style="display:block"><a href="'.$WPUploadDir['baseurl'].'/fsrep/houses/large/'.$ListingDetails->listing_id.'.jpg" title="View Slideshow" class="thickbox" rel="fsreplisting" onmouseover="document.getElementById(\'fsrep-main-image-img\').src=\''.$WPUploadDir['baseurl'].'/fsrep/houses/'.$ListingDetails->listing_id.'.jpg\'; document.getElementById(\'fsrep-main-image-a\').rel=\'fsreplisting\'"><img src="'.$WPUploadDir['baseurl'].'/fsrep/houses/small/'.$ListingDetails->listing_id.'.jpg" class="full" /></a></div>';
}
$PageContent .= '</div>';
$PageContent .= '<div style="clear: both;"></div>';
if ($FSREPShowMap == TRUE) {
$PageContent .= '<div id="location_map" style="display:none;float:left;width:920px">
<div style="margin-top:-150px;width: 80%;"><h2>'.fsrep_text_translator('FireStorm Real Estate Plugin', 'Located in Label', 'Located in').' '.fsrep_get_address_name($ListingDetails->listing_address_city, 'city').', '.fsrep_get_address_name($ListingDetails->listing_address_province, 'province').'</h2>';
// $PageContent .= '<div class="fsrep-aimager"><a href="/wp-content/plugins/fs-real-estate-plugin/themes/default/map.php">Map</a></div>';
$PageContent .= '<div id="listings_map" style="width: 80%; height: 400px; border: 1px solid #999999; margin-bottom: 12px;"></div></div></div>';
$PageContent .= '<br />';
}
/*
$AdditionalImages = '';
for ($i=1;$i<=10;$i++) {
if (file_exists($WPUploadDir['basedir'].'/fsrep/houses/additional/small/'.$ListingDetails->listing_id.'-'.$i.'.jpg')) {
$AdditionalImages .= '<td align="center" valign="center"><a href="'.$WPUploadDir['baseurl'].'/fsrep/houses/additional/large/'.$ListingDetails->listing_id.'-'.$i.'.jpg" title="View Slideshow" class="thickbox" rel="fsreplisting" onmouseover="document.getElementById(\'fsrep-main-image-img\').src=\''.$WPUploadDir['basedir'].'/fsrep/houses/additional/'.$ListingDetails->listing_id.'-'.$i.'.jpg\'; document.getElementById(\'fsrep-main-image-a\').rel=\'lightbox[slideshow]\'"><img src="'.$WPUploadDir['baseurl'].'/fsrep/houses/additional/small/'.$ListingDetails->listing_id.'-'.$i.'.jpg" class="full" /></a></td>';
if ($i == 4) {
$AdditionalImages .= '</tr><tr>';
}
}
}
if ($AdditionalImages != '') {
$PageContent .= '<h2>Photo Gallery</h2>';
$PageContent .= '<table><tr><td><a href="'.$WPUploadDir['baseurl'].'/fsrep/houses/large/'.$ListingDetails->listing_id.'.jpg" title="View Slideshow" class="thickbox" rel="fsreplisting" onmouseover="document.getElementById(\'fsrep-main-image-img\').src=\''.$WPUploadDir['basedir'].'/fsrep/houses/'.$ListingDetails->listing_id.'.jpg\'; document.getElementById(\'fsrep-main-image-a\').rel=\'lightbox[slideshow]\'"><img src="'.$WPUploadDir['baseurl'].'/fsrep/houses/small/'.$ListingDetails->listing_id.'.jpg" class="full" /></a></td>'.$AdditionalImages.'</tr></table>';
$PageContent .= '<p> </p>';
}
*/
if (function_exists('fsrep_pro_listing_child')) { $PageContent .= fsrep_pro_listing_child($ListingDetails->listing_id); }
if ($ListingDetails->listing_description != '') {
$PageContent .= '<div id="description" style="display:block;margin-top:-150px;"><h4 style="display:block;">'.fsrep_text_translator('FireStorm Real Estate Plugin', 'Description Label', 'Description').'</h4>';
$PageContent .= '<p>'.stripslashes(nl2br($ListingDetails->listing_description)).'</p>';
}
$PageContent .= '<p> </p></div>';
$Documents = $wpdb->get_results("SELECT * FROM ".$wpdb->prefix."fsrep_listings_docs WHERE listing_id = ".$ListingDetails->listing_id);
if (count($Documents) > 0) {
$PageContent .= '<h2>'.fsrep_text_translator('FireStorm Real Estate Plugin', 'Documents and Support Material Label', 'Documents and Support Material').'</h2>';
$PageContent .= '<p>';
foreach ($Documents as $Documents) {
$PageContent .= '<a href="'.get_bloginfo('home').'/wp-content/uploads/fsrep/houses/docs/'.$Documents->document_name.'" target="_blank">'.str_replace($ListingDetails->listing_id,'',$Documents->document_name).'</a><br />';
}
$PageContent .= '</p>';
$PageContent .= '<p> </p>';
}
if ($ListingDetails->listing_virtual_tour != '' || $ListingDetails->listing_slideshow != '' || $ListingDetails->listing_video != '') {
$PageContent .= '<h2>'.fsrep_text_translator('FireStorm Real Estate Plugin', 'Videos and Slideshows Label', 'Videos and Slideshows').'</h2>';
$PageContent .= '<p>';
if ($ListingDetails->listing_virtual_tour != '') {
$PageContent .= '<a href="'.$ListingDetails->listing_virtual_tour.'" rel="nofollow" target="_blank">'.fsrep_text_translator('FireStorm Real Estate Plugin', 'Virtual Tour Label', 'Virtual Tour').'</a><br />';
}
if ($ListingDetails->listing_slideshow != '') {
$PageContent .= '<a href="'.$ListingDetails->listing_slideshow.'" rel="nofollow" target="_blank">'.fsrep_text_translator('FireStorm Real Estate Plugin', 'Slideshow Label', 'Slideshow').'</a><br />';
}
if ($ListingDetails->listing_video != '') {
$PageContent .= '<a href="'.$ListingDetails->listing_video.'" rel="nofollow" target="_blank">'.fsrep_text_translator('FireStorm Real Estate Plugin', 'Video Label', 'Video').'</a><br />';
}
$PageContent .= '</p>';
$PageContent .= '<p> </p>';
}
答案 0 :(得分:0)
您还需要定义图像部分的宽度。尝试将图像放在div或p标签等容器中,并指定图像部分的宽度。
答案 1 :(得分:0)
尝试使用DIV将其分为两部分。
将float:left;
提供给第一个DIV