QA@IT
«回答へ戻る

回答を投稿

貼り付けるだけで確認できました。助かります。

インラインブロック要素同士なので、横方向に積み上げているイメージになります。
divと二つのpに border: 1px black solid; というスタイルを足すとわかりやすいかもしれません。

正しい解決策かは自信はありませんが今回のこのサンプルで言えば、

  1. 二つのpからdisplay指定を外す(消す)
  2. p.myMarqueeに position: absolute; を加える とすることで、一応は実現できると思います。

ただposition:absoluteは(position:static以外の)親要素から見た絶対位置指定(ほかの要素に関係なくleft,rightを適用できる)なので、今回で言えばdiv内にほかの要素が増えてきた場合、位置を調整する必要があります。
そのあたりに注意が必要です。

たとえば、

<div>
  <p class="myMarquee">こんにちは</p>
  <span>abcd</span>
  <p style="text-align:center;">○</p></div>
</div>

となったときに「○」の方はspanの分ずれますが、「こんにちは」はあくまで親要素(今回はdiv)からの位置算出となるのでずれません。
結果、「○」と「こんにちは」は別の高さになってしまうということです。

貼り付けるだけで確認できました。助かります。

インラインブロック要素同士なので、横方向に積み上げているイメージになります。
divと二つのpに `border: 1px black solid;` というスタイルを足すとわかりやすいかもしれません。

正しい解決策かは自信はありませんが今回のこのサンプルで言えば、
1. 二つのpからdisplay指定を外す(消す)
2. p.myMarqueeに `position: absolute;` を加える
とすることで、一応は実現できると思います。

ただposition:absoluteは(position:static以外の)親要素から見た絶対位置指定(ほかの要素に関係なくleft,rightを適用できる)なので、今回で言えばdiv内にほかの要素が増えてきた場合、位置を調整する必要があります。
そのあたりに注意が必要です。

たとえば、

```
<div>
  <p class="myMarquee">こんにちは</p>
  <span>abcd</span>
  <p style="text-align:center;">○</p></div>
</div>
```
となったときに「○」の方はspanの分ずれますが、「こんにちは」はあくまで親要素(今回はdiv)からの位置算出となるのでずれません。
結果、「○」と「こんにちは」は別の高さになってしまうということです。