HTML 同じ行内で２つの文字列をそれぞれ左寄せ・右寄せで並べたいが 改行しているように見える

Question

<style>
h1 {
    font-size: 24px; // 文字の大きさ
    text-align: center; // テキストを真ん中に寄せる
}
span.b12 {
    font-size: 12px; // 文字の大きさ
    font-weight: bold; // テキストを左に寄せる
}
</style>
<div style="float: left; text-align:left;" ><span class="b12">○○○○株式会社</span><span>  行</span></div>
<div style="float: right; text-align:right;" ><span>2019年○月○日</span></div>
<h1>注文書</h1>

○○○○株式会社が左隅から・2019年○月○日が右隅に、同じ行に表れていることを望んでいますが、下記のとおりそのようになってくれません。

HTMLというか、PHPでのTCPDFというライブラリの採用中で、この上でHTMLを定義している過程です。初歩的なことですが　どうすれば段ズレみたいな事象を克服できるのでしょうか？

まだまだ色々とお聞きしたいことがあるのですが、一先ずこちらから教えてください。

【追記】
上記の画像は下記コーディングから達成されています。
純粋なHTMLであればstyleタグはheadタグ内に書くのでしょうが、このライブラリを導入する上では以下のような形式になるっぽいです、参考にしたサイトによれば．．．

<?php
include "C:/xampp/htdOcs/tcpdf/tcpdf.php";
 
$tcpdf = new TCPDF("L", "mm", "A4", true, "UTF-8" );
$tcpdf->SetFont("kozgopromedium", "", 10); // デフォルトで用意されている日本語フォント
$tcpdf->setPrintHeader(false); 

$tcpdf->AddPage(); // 新しいpdfページを追加

$html = <<< EOF
<style>
h1 {
    font-size: 24px;
    text-align: center;
}
span.b12 {
    font-size: 12px;
    font-weight: bold;
}
</style>
<div style="float:right; text-align: right;"><span>2019年○月○日</span></div><div style="float:left;" ><span class="b12" style="text-align: left;">○○○○株式会社</span><span>  行</span></div>
<div style="clear: both"></div>
<h1>注文書</h1>
EOF;
 
$tcpdf->writeHTML($html); // 表示htmlを設定
$tcpdf->Output('samurai.pdf', 'I'); // pdf表示設定
?>

Comments

[退会済みユーザー]

どう考えてもphp関係ない、htmlとcssの問題。

Answer 1

floatを使用して同じ行の左右に並べる場合はfloat:rightのものをhtmlの先に書くと段違いになりません。
あと、今ではflexという便利なものもありますので調べてみてください。
Bootstrapを触ってみるといろいろ勉強になりますよ。

Comments

[saya24]

float:rightを定義したDIVを先に定義したら、今度はそのDIVが先の行として現われるようになっただけで、相変わらず段ズレを起こしているような表示をしています。
双方のDIVがめいいっぱい横幅を展開してしまっている？？

[cerfweb]

ご提示されたコード以外にスタイルがその部分に適用されていませんか？
width:100%とか。

[saya24]

ご支援ご見解を頂き誠にありがとうございます。
本文に全文のコーディングを貼り付けました。HTML部分・デザインをPHPのヒアドキュメントで格納しているのですが、この部分を試しに新規のHTML・Webページとして貼り付けて出来具合を確認したら．．．厄介なことに希望どおりのデザインで表示されてきました。
勿論Styleタグはヘッダに入れて．．．

TCPDFが故のことなのでしょうか

Answer 2

CSSのコメントは// 内容 ではなく /* 内容 */です。

<div>
<span class="b12">○○○○株式会社</span><span>  行</span>
<span class="b13">2019年○月○日</span>
</div>

h1 {
  font-size: 24px;
  text-align: center;
}

span.b12 {
  font-size: 12px;
  font-weight: bold;
}

span.b13 {
  float: right;
  text-align: right;
}

```**動くサンプル：**[https://jsfiddle.net/y2gjca4n/](https://jsfiddle.net/y2gjca4n/)

---

【よこ並びのCSS。】
[http://lopan.jp/layout/](http://lopan.jp/layout/)

【段組みのCSS。】
[https://lopan.jp/layout2/](https://lopan.jp/layout2/)

Comments

[saya24]

ヒアドキュメント内でのHTML記述です。言及が足りず申し訳ありません（コメントアウトについて）

DIVを2つ並べて横並びにみえるケースと、横並びにはみえないケースがあるようですが、それはDIVで囲んでいる子要素次第！ということでしょうか．．．。横幅がきまったimg要素を囲んでいた場合、ちゃんと横にDIVが並んでいるかの如く見えていたのですが。

kei344さんは一つのDIVの中でalignを定義したSPANで制御していますねぇ。そして示して戴いたサンプルではしっかり目的が達成されていますね。
私が敢えてDIVを並べた理由って<https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1214760812?__ysp=U1BBTiB0ZXh0LWFsaWdu>の記事で、spanの中にalignが定義できない、みたいな記載をみてこの方針をとってしまったのですが、間違いなのですかね？

kei344さんのHTMLをコピペすればうまくいってしまうのですが、今後のことを考えしっかり学んでおきたいですぅ　左隅と右隅に文字を表示する・要素を配置する方法（よくあると思うので）

[kei344]

残念ながらコメントで説明できるほど私は説明がうまくないので、本でも買って勉強してください。

Answer 3

TCPDFのHTMLパーサーはブラウザほど賢くない。
あくまで簡易的なものと割り切って使うべし。

Comments

[saya24]

やはりそれが原因ですかねぇ

[退会済みユーザー]

https://stackoverflow.com/questions/3404095/tcpdf-not-render-all-css-properties

この辺読んでみて