横並び　縦並びの混合

前提・実現したいこと

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を使用

kai0310

2020/10/09 18:23

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

行動規範の内容に同意します

回答2件

こんにちは。

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

サンプル

css
1body{
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4}
5.news, .news1{
6  display: contents;
7}
8.news>a{
9  order:1;
10}
11.news1+.news1>*{
12  order:2;
13}

投稿2020/10/10 01:56

編集2020/10/10 02:00

Lhankor_Mhy

総合スコア36960

Lhankor_Mhy

2020/10/10 01:58

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

Lhankor_Mhy

2020/10/10 02:00

修正しました。

tan0203

2020/10/10 07:29

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

行動規範の内容に同意します

ベストアンサー

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

作りたい形が


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

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

html
1<div class="news">
2    <h1 class="tti">NEWS</h1>
3    <img class="ft" src="img/IMG1.png">
4    <ul class="tx">
5        <li>テキストテキスト</li>
6        <li>テキストテキスト</li>
7     </ul>
8</div>
9<div class="news">
10    <p class="tti"><a>- view all -</a></p>
11    <img class="ft" src="img/IMG2.png">
12    <ul class="tx">
13        <li>テキストテキスト</li>
14        <li>テキストテキスト</li>
15     </ul>
16</div>

css
1.news {
2  display: flex;
3  align-items: flex-start;
4  justify-content: flex-start;
5  margin-bottom: 10px;
6}
7.tti {
8  flex: 0 0 7em;
9  margin: 0;
10}
11.ft{
12  flex: 0 0 10vw;
13  height: 5vw;
14}
15.news ul {
16  flex: 1 1 auto;
17  list-style: none;
18  margin: 0;
19  padding: 0;
20}