1. ホーム
  2. html

CSSで2つの要素を横に並べる方法

2023-10-04 14:46:09

質問

の右側に段落を配置したい。 <iframe> の右側に配置したい。

私は私のコードを表示する方法を知らないので、ここに私が望むもののスクリーンショットがあります。

どのように解決するのですか?

floatスタイルを使うだけです。google map iframeをdivクラスに、段落を別のdivクラスに入れて、以下のCSSスタイルを適用します(float効果後のブロックは、下のブロックに迷惑がかからないようにクリアすることを忘れずに)。

css

.google_map{
    width:55%;
    margin-right:2%;
    float: left;
}
.google_map iframe{
   width:100%;
}
.paragraph {
    width:42%;
    float: left;
}
.clearfix{
    clear:both
}

html

<div class="google_map">
      <iframe></iframe>
</div>
<div class="paragraph">
      <p></p>
</div>
<div class="clearfix"></div>