ボックスの中の要素を横並びにしたい。

実現したいこと

Webサイトを作成しています。ボックスの中のvideo（動画部分）とテキスト部分をボックスの中で横並びにしたいです。

該当のソースコード

HTML
1<section class="tech">
2					<a href="#">
3						<iframe class="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/ccTikqRF9ls?controls=0&amp;start=60" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
4						<div class="tech-text">
5						<div class="category">tech-No.1</div>
6						<p class="description">We offer industrial robots in a wide range of 
7						versions with various.</p>
8						</div>
9					</a>
10				</section>
11

CSS
1.tech {
2	width: 1100px;
3	margin-bottom: 10px;
4	margin-right: 10px;
5	margin-left: 40px;
6	padding: 8px;
7	border-bottom: 3px solid;
8	border-radius: 5px;
9	background-color: #000000;
10	display: flex;
11}
12
13.tech .category {
14	margin: 15px 9px 10px;
15	color: #F7DC01;
16	letter-spacing: 1px;
17	font-family: "Bebas Neue",sans-serif;
18	font-size: 17px;
19}	
20.tech .category::before {
21	content: '';
22	display: inline-block;
23	width: 19px;
24	height: 19px;
25	margin-right: 5px;
26	border: 2px solid;
27	border-radius: 50%;
28	vertical-align: -5px;
29}
30.tech .description {
31	margin: 10px;
32	line-height: 1.5;
33}
34.tech > a {
35	display: block;
36	margin: -8px -8px -11px;
37	padding: 8px 8px 11px;
38	border-radius: inherit;
39	color: #FFF;
40	transition: all 0.3s;
41}
42.tech > a:hover {
43	box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
44	opacity: 0.8;
45}

試したこと

displayをflexやinline-blockにしてみましたが、解決できませんでした。

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

回答2件

techクラスにはdisplay:flex;とありますが、<a>タグの要素しかありません。
ソースのインデントをきちんとしたら気づいたはずです。

尚、techクラスにはflex以外の指定があるので囲むdivにつけてしまうと
意図しない指定値が適用されてしまいます。
なのでtechクラスからflexの指定を外し、
並べたい要素をdivで囲んで、そこにflexの指定をした新しく作ったクラスを当てればいいです。

ちなみに元のhtmlはdivの閉じタグが１つ足りませんでしたので補ってあります。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width,initial-scale=1.0">
6        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
7        <meta name="format-detection" content="telephone=no">
8        <title>flex-test</title>
9        <link rel="stylesheet" href="./flex-test.css" type="text/css" media="all">
10    </head>
11    <body>
12        <article>
13            <section class="tech">
14                <a href="#">
15                    <div class="flex-row-nowarap">
16                        <iframe class="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/ccTikqRF9ls?controls=0&amp;start=60" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
17                        <div class="tech-text">
18                            <div class="category">tech-No.1</div>
19                                <p class="description">We offer industrial robots in a wide range of 
20                                    versions with various.</p>
21                            </div>
22                        </div>
23                    </div>
24                </a>
25            </section>
26        </article>
27    </body>
28</html>

css
1@charset "UTF-8";
2.tech {
3    width: 1100px;
4    margin-bottom: 10px;
5    margin-right: 10px;
6    margin-left: 40px;
7    padding: 8px;
8    border-bottom: 3px solid;
9    border-radius: 5px;
10    background-color: #000000;
11}
12
13.tech .category {
14    margin: 15px 9px 10px;
15    color: #F7DC01;
16    letter-spacing: 1px;
17    font-family: "Bebas Neue",sans-serif;
18    font-size: 17px;
19}    
20.tech .category::before {
21    content: '';
22    display: inline-block;
23    width: 19px;
24    height: 19px;
25    margin-right: 5px;
26    border: 2px solid;
27    border-radius: 50%;
28    vertical-align: -5px;
29}
30.tech .description {
31    margin: 10px;
32    line-height: 1.5;
33}
34.tech > a {
35    display: block;
36    margin: -8px -8px -11px;
37    padding: 8px 8px 11px;
38    border-radius: inherit;
39    color: #FFF;
40    transition: all 0.3s;
41}
42.tech > a:hover {
43    box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
44    opacity: 0.8;
45}
46.flex-row-nowarap { //新たにflex指定用に作ったクラス
47    display: flex;
48    flex-flow: row nowrap;
49}

コードブロックの右上のアイコンをクリックするとコード全体をコピーできるので、ご自分の環境に張り付けて、動作確認してみてください。

当方では動作確認済みです。

投稿2021/07/07 12:37

編集2021/07/07 13:14

nekora

総合スコア501

nekora

2021/07/07 12:38

回答が役になったなら回答の横の数字をポイントすると回答の評価の増減ができます。また解決につながった回答はベストアンサーに指定できます。この設定は個別に指定できます。

nekora

2021/07/07 12:41

あららコードを書いているうちに他の方が先に答えてしまったか… まぁ完全なコードを載せたので、役に立ったなら評価をいただければ幸いです。

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

ベストアンサー

display: flex;にしている.techの直接の子が<a>だけなので並べるも何もないです。
たとえば下記のように並べたいブロック全体を<div class="tech">で囲めば良いでしょう。

<section>
  <a href="#">
    <div class="tech">
                        <iframe class="video" width="560" 
    .
    .
    .
    </div>
  </a>
</section>

投稿2021/07/07 11:51

編集2021/07/07 11:52