画像の右に文章が表示されるようにしたい。

メニュー下に空間を入れて、下に画像と文章が横並びにしたい。

HTMLt">
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  <title>Hidamari ホームページ制作</title>
7  <link rel="stylesheet" href="css/reset.css">
8  <link rel="stylesheet" href="css/style.css">
9
10</head>
11
12<body>
13<header>
14  <div class="container">
15    <div class="header-left">
16    <h1 class="header-title">Hidamari ホームページ製作所</h1>
17    </div>
18    <div class="header-right">
19      <nav>
20      <ul>
21        <li>about</li>
22        <li>service</li>
23        <li>work</li>
24        <li>contact</li>
25      </ul>
26    </nav>
27    </div>
28
29  </div>
30</header>
31<section class="top">
32  <div class="container">
33    <div class="about">
34    <figure class="photo-left"><img src="img/photo03.jpg"></figure>
35   
36    <h2 >about me</h2>
37    <p>41歳の時にデイトラはじめる。<br>
38      現在、A事業でホームページ制作勉強中。
39
40    </p>
41  </div>
42  </div>
43</section>
44</body>
45</html>

CSS
1/*================
2header
3=================*/
4nav{
5  text-align: center;
6}
7  nav ul{
8  margin: 0 ;
9  padding: 0 ;
10  }
11  nav ul li{
12  list-style: none;
13  display: inline-block;
14  width: 18%;
15  min-width: 90px;
16  }
17  nav ul li a{
18  text-decoration: none;
19  color: #333;
20  }
21  nav ul li.current a{
22  color: #F33135;
23  }
24  nav ul li a:hover{
25  color: #E7DA66;
26  }
27
28/*================
29top
30=================*/
31img{
32  width: 40%;
33}
34.container{
35  margin: 10px;
36}
37.top{
38  margin-top: 30px;
39 
40}
41.about{
42  float: left;
43}

m.ts10806

2020/08/17 21:11

質問、および現状の問題、課題は何でしょうか

newdeal41

2020/08/19 11:59

画像が、navバーの下に行かなくて、空間を開けたいのですが、どうしたらいいでしょうか？

newdeal41

2020/08/19 12:12

aboutの文字を画像の右側に表示したいです。よろしくお願いします。

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

回答1件

floatは解除しないと後の要素まで回り込むので、
.top{clear:both;}か、.container{overflow:hidden;}を追記することである程度解決できるかもしれません。

最近は横並びの配置にはfloatよりflexboxが使われることが多いのでそちらも学習されてはいかがかと思います。
CSS Flexbox の基礎知識と使い方をやさしく解説(coliss)
日本語対応！CSS Flexboxのチートシートを作ったので配布します(Webクリエイターボックス)

投稿2020/08/18 00:43

dit.

総合スコア3235

newdeal41

2020/08/24 07:33

すみません、両方やってみたのですが、ならなかったので、どうすればよろしいでしょうか？flexは、どうも、私が考えている感じにはならなかったので、大変申し訳ないのですが、よろしくお願いします。

dit.

2020/08/24 09:52

質問の編集で、HTMLの構造やCSSの記述が変わっているようです。編集履歴から元のコードを拾って、私が回答した時点での「こうではないか」を貼っておきます。編集後のコードについては改善策を作成していません。 .top{clear:both;}　→　https://codepen.io/dit4410/pen/VwaPdaE .container{overflow:hidden;}　→　https://codepen.io/dit4410/pen/GRZrGja 提示のコードをあまり気にせずにflexで組んでみたもの　→　https://codepen.io/dit4410/pen/YzqNvLb 最終的に求めるレイアウトがわからないので想像で作成しています。

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