WordPress-Seite Inhalt Stil ist anders als Editor-Stil

Question

Ich entwickle ein WordPress-Theme. Für meine Seiteninhalt im Editor, sieht es wie folgt aus:

das ist der Stil, den ich will. Allerdings, wenn ich Ausgabe, die es in page.php, wird der Stil anders wie folgt aus:

Wie Sie sehen können, die Textausrichtung und Schriftart völlig anders wird. Was soll ich mit meinem Thema tun, damit der Ausgabestil genau so aussieht wie im Editor? Dank

Hier ist mein Code für page.php:

<?php get_header(); ?> 

<div id="content" class="row card index-card" role="main"> 
    <div class="col-xs-12"> 
     <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
      <div class="entry-header"> 
       <h3 class="page-title entry-title" item-prop="headline"> 
        <?php the_title(); ?> 
       </h3> 
      </div> 
      <div class="entry-content" item-prop="text"> 
       <?php echo $post -> post_content; ?> 
      </div> 
     </article> 
    </div> 
</div> 

<?php get_footer(); ?> 

Und functions.php:

<?php 

add_theme_support('post-formats'); 
add_theme_support('post-thumbnails'); 

// Adding stylesheets and js libraries 
function installLibraries() { 
    // CSS 
    wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
    wp_enqueue_style('bootstrap-theme', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'); 
    wp_enqueue_style('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'); 
    wp_enqueue_style('slick-theme', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'); 
    wp_enqueue_style('navbar-style', get_template_directory_uri() . '/css/navbar.css'); 
    wp_enqueue_style('footer-style', get_template_directory_uri() . '/css/footer.css'); 
    wp_enqueue_style('style', get_stylesheet_uri()); 

    // JS 
    wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', array('jquery'), null, true); 
    wp_enqueue_script('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js', array('jquery'), null, true); 
    wp_enqueue_script('masonry', 'https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js', array('jquery'), null, true); 
    wp_enqueue_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), null, true); 
    wp_enqueue_script('index', get_template_directory_uri() . '/js/index.js', array('jquery'), null, true); 
} 
add_action('wp_enqueue_scripts', 'installLibraries'); 


// Adding menu support as well as walker 
require_once('wp-bootstrap-navwalker.php'); 
register_nav_menus(array(
    'main_menu' => __('Main Menu', 'mw-material') 
)); 
// Add search at the end 
function nav_search($items, $args) { 
    // If this isn't the primary menu, do nothing 
    if(!($args->theme_location == 'main_menu')) { 
      return $items; 
     } 
    // Otherwise, add search form 
    return $items . '<div class="search-dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
       <img class="search-icon" alt="search" src='. get_template_directory_uri() . '/img/icons/search.png?> 
      </a> 
      <ul class="dropdown-menu"> 
       <li>' . get_search_form(false) .'</li> 
      </ul> 
     </div>'; 
} 
add_filter('wp_nav_menu_items', 'nav_search', 10, 2); 

Dieses spezifische Problem mehr für Wordpress ist

Answer 1

in CSS stellen Sie Ihren zu float:left . , die funktionieren sollte: http://jsfiddle.net/cornelraiu/kYDgL/1016/

How to wrap text around an image using HTML/CSS

hinzufügen

.entry-content img{float:left}