如何在wordpress中並排放置兩個div

Question

我正在使用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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>';

}

Answer 1

您還需要定義圖像部分的寬度。嘗試將圖像放入div或p標簽等容器中，並指定圖像部分的寬度。

Answer 2

嘗試使用DIV將其分為兩部分。 給float:left; 到第一個DIV