WordPressのページコンテンツスタイルは、エディタスタイルと異なります。

Question

WordPressテーマを開発しています。私がしたいスタイルです

：エディタで私のページの内容に関しては、それはこのようになります。しかし、page.phpにおけるI出力は、スタイルは、このようなさまざまなったとき：

あなたが見ることができるように、テキストの配置やフォントが完全に異なってきます。出力スタイルをエディタとまったく同じにするには、私のテーマにどうしたらよいですか？おかげ

ここでは、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(); ?> 

との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); 

この特定の問題は、CSSのワードプレス

Answer 1

のためのより多くのですfloat:leftにあなたを設定します。動作するはず ：http://jsfiddle.net/cornelraiu/kYDgL/1016/

How to wrap text around an image using HTML/CSS

私も私のコードでそれを試してみましません

.entry-content img{float:left}