横並び 縦並びの混合

Question

前提・実現したいこと

NEWS ｜　画像　｜　テキスト
view all ｜　画像　｜　テキスト

上記のように表示させたいです。（｜はないものとします）

発生している問題・エラーメッセージ

　NEWS　　｜ 画像　｜テキスト　｜　画像　｜　テキスト
View all

現在上記のように表示されております。

該当のソースコード

HTML
<div class="news">
        <h1>NEWS</h1>
        <a>- view all -</a>
      </div>
      <div class="news1">
        <img class="ft" src="img/IMG1.png">
        <ul class="tx">
          <li>テキストテキスト</li>
          <li>テキストテキスト</li>
        </ul>
      </div>
      <div class="news1">
        <img class="ft" src="img/IMG2.png">
        <ul class="tx">
          <li>テキストテキスト</li>
          <li>テキストテキスト</li>
        </ul>
      </div>

CSS
.news1{
  display: flex;
  align-items: center;
}

.ft{
  width: 10vw;
  height: 5vw;
}

.news1 + .news1{
  margin-top: 10px;
}

.news{
  float: left;
}

.news1{
  float: right;
}

試したこと

1).news,.news1にflexを使用
2)floatを使用

Comments

[kai0310]

インデントを揃えましょう。
先程の質問の続きの様ですが、まずは一度落ち着いてがむしゃらに質問を投稿するのではなく何か解決方法がないか考えましょう。

Answer 1

こんにちは。

デザインの方向性とHTMLの構造がかなり違うので、どうしても無理やりな感じになります。
できれば、HTMLの見直しをした方がいいのではないかと思います。（たとえば、テーブル）

サンプル

body{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.news, .news1{
  display: contents;
}
.news>a{
  order:1;
}
.news1+.news1>*{
  order:2;
}

Comments

[Lhankor_Mhy]

んん？　よくみると、画像とテキストも横並びなのか……
もう少しひねってみます。

[Lhankor_Mhy]

修正しました。

[tan0203]

回答ありがとうございます。
HTMLを見直した方がいいのですね！
まだ勉強を始めたばかりで知識不足なのですが
テーブルの場合表形式の表示にならないでしょうか？
やりたいことはなかなか難しいことなのかもしれないですね、、
いただいたCSSで一度試してみます。ありがとうございます！

Answer 2

flexやfloatの意味を理解しておられないようですね
本来であれば、それぞれの働きを調べられた方が良いかとは思いますが、、、

作りたい形が

NEWS	画像	テキストテキスト
	テキストテキスト
view all	画像	テキストテキスト
	テキストテキスト

のように見せたいのであれば
flexでいくのが一番簡単だと思いますので

<div class="news">
    <h1 class="tti">NEWS</h1>
    <img class="ft" src="img/IMG1.png">
    <ul class="tx">
        <li>テキストテキスト</li>
        <li>テキストテキスト</li>
     </ul>
</div>
<div class="news">
    <p class="tti"><a>- view all -</a></p>
    <img class="ft" src="img/IMG2.png">
    <ul class="tx">
        <li>テキストテキスト</li>
        <li>テキストテキスト</li>
     </ul>
</div>

.news {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.tti {
  flex: 0 0 7em;
  margin: 0;
}
.ft{
  flex: 0 0 10vw;
  height: 5vw;
}
.news ul {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

余白が必要であれば、それぞれに padding などを
入れればよいかと^^