h1とh2の右側のスペースに画像を表示させたい

色々とタグを入れ替えてためしてみましたが、うまくいきません。
リストが右側によったりと私がイメージしているようにはいきません。
ご教授お願い致します。

HTML
1<body>
2	<div class="wrapper01">
3/*省略*
4<main>
5		<h1>*************</h1>
6		<div class="box-text">
7		<div class="box-img01">
8	<img src="images/**********.jpg" alt="***">
9</div>
10		<h2>*****************！！<br>**********************************！！</h2>
11		<div class="menu">
12		<h3>&lt;*******&gt;</h3>
13		<ul>
14			<li>***********</li>
15			<li>********************</li>
16			<li>******/li>
17		</ul>
18	</div>
19<div class="float-claer02">
20</div>
21</div>
22<div cladd="box-text02">
23	<h1>************ ********</h1>
24	<h2>********************************！！</h2>
25	<h3>&lt;*****&gt;</h3>
26	<ul>
27		<li>**********</li>
28		<li>***************</li>
29		<li>*******************</li>
30		<li>************************</li>
31
32
33
34
35
36
37</main>

CSS
1@charset "utf-8";
2
3.menu{
4display:flex;
5justify-content:space-between;
6}
7h1{
8	font-size: 30px;
9	margin-top: 65px;
10}
11h2{
12	font-size: 25px;
13	margin-top: 24px;
14}
15h3{
16	font-size: 20px;
17	margin-top: 15px;
18	margin-bottom: 5px;
19}
20.box-img01{
21    text-align: right;
22    margin-bottom: 0.5em;
23 }
24 .box-img{
25 	margin-top: 10px;
26 	margin-right: 0px;
27 	margin-bottom: 0.5em;
28 	vertical-align: baseline;
29 }
30.float-claer{
31    overflow: hidden;
32    text-align: right;
33}
34ul{
35    list-style-type:-2em;
36    font-size: 16px;
37}
38.menu li{
39    font-size: 22px;
40    text-indent: 2em;
41    line-height: 1.5;
42}

CSS
1html, body, div, span, object, iframe,
2h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3abbr, address, cite, code,
4del, dfn, em, img, ins, kbd, q, samp,
5small, strong, sub, sup, var,
6b, i,
7dl, dt, dd, ol, ul, li,
8fieldset, form, label, legend,
9table, caption, tbody, tfoot, thead, tr, th, td,
10article, aside, canvas, details, figcaption, figure, 
11footer, header, hgroup, menu, nav, section, summary,
12time, mark, audio, video {
13    margin:0;
14    padding:0;
15    border:0;
16    outline:0;
17    font-size:100%;
18    vertical-align:baseline;
19    background:transparent;
20}
21
22body {
23    line-height:1;
24}
25
26article,aside,details,figcaption,figure,
27footer,header,hgroup,menu,nav,section { 
28    display:block;
29}
30
31nav ul {
32    list-style:none;
33}
34
35blockquote, q {
36    quotes:none;
37}
38
39blockquote:before, blockquote:after,
40q:before, q:after {
41    content:'';
42    content:none;
43}
44
45a {
46    margin:0;
47    padding:0;
48    font-size:100%;
49    vertical-align:baseline;
50    background:transparent;
51}
52
53/* change colours to suit your needs */
54ins {
55    background-color:#ff9;
56    color:#000;
57    text-decoration:none;
58}
59
60/* change colours to suit your needs */
61mark {
62    background-color:#ff9;
63    color:#000; 
64    font-style:italic;
65    font-weight:bold;
66}
67
68del {
69    text-decoration: line-through;
70}
71
72abbr[title], dfn[title] {
73    border-bottom:1px dotted;
74    cursor:help;
75}
76
77table {
78    border-collapse:collapse;
79    border-spacing:0;
80}
81
82/* change border colour to suit your needs */
83hr {
84    display:block;
85    height:1px;
86    border:0;
87    border-top:1px solid #cccccc;
88    margin:1em 0;
89    padding:0;
90}
91
92input, select {
93    vertical-align:middle;
94}

hatena19

2020/12/02 00:02

ご希望のレイアウトが言葉だけでは伝わらないので、画像で提示できませんか。また、HTMLを変更してもいいですか。

FKM

2020/12/02 01:10

htmlが色々不備あるのでは？もちろん、原本のままではないでしょうが。ulの閉じタグがなかったり…

let

2020/12/02 01:27

HTMLは変更していただいて構いません。エクセルで作った図を添付いたします。

FKM

2020/12/02 01:32

CSSの制御問題はCSS側だけでなく、htmlにも起因することが多い（構造やhtmlタグの不備によってCSSの制動が変わる）ので、こっちで勝手に補完してもしょうがないですよ。なので、極力、依頼側が解決に協力する姿勢を向けてくれない限り、他の方もアドバイスのしようがないです。

let

2020/12/02 01:39

申し訳ありません。図のイメージ通りにタグを設置できないので図の形で表示させていただきました。 ul-liの横のスペースにはご教授いただき設定出来たのですが同じやり方ではリスト部分も右に移動してしまい思い通りにできませんでした。

FKM

2020/12/02 01:43

たとえば、box-text02直下のulタグは閉じてないですが、最初からそうなっていますか？

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

回答2件

ベストアンサー

HTMLは、
h1 h2 menu をdivで囲む。
box-img01 をその後に配置。
上記を<div class="wrapper">で囲む。

CSSは、
.wrapperにflexを設定して子要素を横並びに。

html
1<main>
2  <div class="wrapper">
3    <div class="box-text">
4      <h1>h1 *************</h1>
5      <h2>h2*****************！！<br>**********************************！！</h2>
6      <div class="menu">
7        <h3>&lt;h3*******&gt;</h3>
8        <ul>
9          <li>li***********</li>
10          <li>li********************</li>
11          <li>li******</li>
12        </ul>
13      </div>
14    </div>
15    <div class="box-img01">
16      <img src="https://placehold.jp/150x150.png" alt="***">
17    </div>
18  </div>
19
20<!-- 略 -->
21
22</main>

css
1@charset "utf-8";
2/* 以下挿入 */
3.wrapper {
4 display:flex;
5 justify-content:space-between; 
6}
7
8/* 削除 ここから 
9.menu{
10display:flex;
11justify-content:space-between;
12} 
13ここまで */
14
15/* 中略 */
16
17.box-img01{
18    text-align: right;
19    margin-bottom: 0.5em;
20    margin-top: 65px; /* 追加 画像の位置合わせ 適宜調整 */
21}

投稿2020/12/02 01:54

編集2020/12/02 01:55

hatena19

総合スコア33699

let

2020/12/02 02:04

cllass=wapperは、box-img01で一度閉じてしまって、box-img02で再度wapperで囲む形の認識で問題ないですか？

hatena19

2020/12/02 02:12

やってみて問題がなければ問題ないです。あれば、どこが問題か説明してください。

let

2020/12/02 02:21

今タグを打ち直ししましたが、ul-liのリストの横のスペースに画像がいています。これをもう少し上に上げたいですが難しいですか？

hatena19

2020/12/02 02:34

.box-img01 の margin-top の値を小さくすれば上に移動すると思います。

let

2020/12/02 02:43

出来ました。ありがとうございましたまた何かありましたらお願い致します

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

こんにちは。

サンプル

css
1.box-text {
2	display: grid;
3	grid-template: auto auto / auto auto;
4}
5.box-img01 {
6	grid-column: 2;
7	grid-row: 1 / span 2;
8}
9h2 {
10	grid-column: 1;
11	grid-row: 1;
12}