ワードプレス画像の不一致

私は教師のためのインタラクティブな電子レッスンプランビルダーを開発しています。私はすべて私の大学のWordPressページに送信する前にJSbinのテストです。ワードプレス画像の不一致

私はalign = "left"属性の画像をたくさん持っています。これはJSbinでは完全に機能しますが、WordPressでは斜めに降りて表示されます。これは、3番目のボックスのライブRITページ（4つのうち）に表示されます。これはWordPressの既知のバグですか、コードを上書きするときに間違ったことをしていますか？私に迷惑を与える

< JSbin link />

< Live RIT page />

コードブロック：

<p>Select Parts:</p> 
<div id="bin3"> 
<img id="drag1" src="http://i.imgur.com/KliLtQ6.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"> 
<img id="drag3" src="http://i.imgur.com/uGvqbbK.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"> 
<img id="drag6" src="http://i.imgur.com/7Q6ym4O.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"> 
<img id="drag8" src="http://i.imgur.com/dywyFeu.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"> 
<img id="drag12" src="http://i.imgur.com/v76St3j.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"> 
<img id="drag14" src="http://i.imgur.com/vO6a0ae.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"> 
<img id="drag15" src="http://i.imgur.com/50c1YvW.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"> 
<img id="drag16" src="http://i.imgur.com/BHn8uyJ.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)"> 
<img id="RED1" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left"> 
<img id="RED2" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left"> 
<img id="GREEN1" src="http://i.imgur.com/nFzIajN.png" draggable="true" ondragstart="drag(event)" align="left"> 
<img id="GREEN2" src="http://i.imgur.com/nFzIajN.png" draggable="true" ondragstart="drag(event)" align="left"> 
<img id="BLUE1" src="http://i.imgur.com/dYNAatC.png" draggable="true" ondragstart="drag(event)" align="left"> 
<img id="BLUE2" src="http://i.imgur.com/dYNAatC.png" draggable="true" ondragstart="drag(event)" align="left"> 
<div id="RedLine"></div> 
<div id="GreenLine"></div> 
<div id="BlueLine"></div> 
</div>

は、このプロジェクトの任意およびすべてのヘルプをありがとう！

出典

2017-06-12 Mark

「」の後ろに「
」というタグが追加されましたので、それを削除してください。 –

私はこれまでの回答はすべて良いと思っていますが、私はあなたも問題の根本を理解する必要があると思います。これは、空の行ではなく、あなたのコンテンツの中にpタグとbrタグを挿入する、wordpressのデフォルトの動作です。私はむしろそれをフィーチャーと呼びますが、バグではありません。好むと好まざるとにかかわらず。

通常のブログコンテンツの場合、通常はそれほど悪くありません。おそらく、HTMLやソートについて何も知らない通常のWPユーザの生活を改善するでしょう。しかし、確かに、あなたがそれらのタグをそこに置いておかないと、間違いなく迷惑になります。

コンテンツをフィルタリングできます。 P/BRタグを削除しますが、これはかなりワードプレスのデフォルトの動作を変更します。

プラグインが同様にあります。

個人的に私はすべての小さなものにプラグインを追加するファンではありません。

https://developer.wordpress.org/themes/template-files-section/page-template-files/#creating-a-custom-page-template-for-one-specific-page

私は確信している：あなたは別のHTML（PHP）-fileを使用している特定のページのように、私はおそらく、（あなたのページには、十分なカスタマイズに見える）のカスタムページテンプレートで行くだろう他の回避策もあります。

出典

2017-06-12 05:36:37 ippi

あなたが画像を整列するために使用することができます以下

#bin3 { 
    height: 250px; 
    padding: 10px; 
    border: 2px solid black; 
    display: flex; 
    justify-content: flex-start; 
    align-items: flex-start; 
}

あなたがそれらの間のいくつかのスペースを入れて余白を使用することができます。

出典

2017-06-12 05:09:43 Gerard

ワードプレス画像の不一致

答えて

関連する問題