1

私はレスポンシブ Web サイトに取り組んでいますが、レイアウトを行う際に問題が発生しました。問題を可能な限り少ない行に分割しました。

ウィンドウが 909px より大きい場合、2 番目のコンテンツ (content2) をタイトルのすぐ下に配置します。利用できるスペースが少ない場合は、画像の下に配置したいと考えています。

現在、常に画像の下に配置されます。

こちらがビジュアル。

タイトルの高さが固定されていないため、絶対配置を使用せずに解決策を見つける必要があります。実際、固定の高さの html 要素はありませんが、幅は固定されています。

私は今、数時間簡単な解決策を考え出そうとしています。誰かが私を正しい方向に向けることができることを願っています:)

読んでくれてありがとう！

HTML コード:

<div class="wrapper">
  <h1> some title </h1>
  <div class="image"> some img</div>
  <div class="content1"> some content </div>
  <div class="content2"> some other content </div>
</div>

CSS スタイル:

.content1{
  float: left;
}
.image{
  width: 600px;
}
.content2{
  width: 300px;
  float: right;
}

@screen and (min-width: 768px) and (max-width: 909px){
  .wrapper {
    width: 700px;
  }
  .content1 {
    width: 300px;
  }
}

@screen and (min-width: 909px){
  .wrapper {
    width: 900px;
  }
  .content1{
    width: 600px;
  }
}
4

2 に答える 2