右に寄せた画像を縦並びをあわせたい

Question

右に寄せた２つの画像を調整しようとしてどちらかの右marginを作ると両方ともmarginが出てしまい、うまくレイアウトできません。
ご教授いただけると幸いです。宜しくお願い致します。

<div class="box-text">
		<h1>「******************</h1>
		<h2>************************************！<br>************************************</h2>
<h3>&lt;******&gt;</h3>
<div class="menu">
<ul>
	<li>****************</li>
	<li>***************</li>
	<li>**********************</li>
	<li>********************</li>
	<li>********************</li>
</ul>
<div class="float-claer">
<div class="box-img01">
	<img src="images/******************.png" width="212" height="59" alt="***************">
</div>
<div class="box-img">
	<img src="images/**********************jpg" width="196" height="207" alt="*************">
</div>
</div>
</div>
</body>
</html>

@charset "utf-8";

.menu{
display:flex;
justify-content:space-between;
}
h1{
	font-size: 30px;
	margin-top: 65px;
}
h2{
	font-size: 25px;
	margin-top: 24px;
}
h3{
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 5px;
}
.box-img01{
    margin-right: 0px;
    margin-bottom: 0.5em;
 }
 .box-img{
 	margin-top: 10px;
 	margin-right: 0px;
 	margin-bottom: 0.5em;
 	vertical-align: baseline;
 }
.float-claer{
    overflow: hidden;
}
ul{
    list-style-type:-2em;
    font-size: 16px;
}
.menu li{
    font-size: 22px;
    text-indent: 2em;
    line-height: 1.5;
}

Comments

[FKM]

どのブラウザで見てもそうなりますか？ブラウザの癖で持っている、デフォルトmargin幅に干渉されてませんか？

[let]

記載漏れになり申し訳ありません。
reset.cssを適用しておりますので、デフォルトではないと考えております

Answer 1

右に寄せた２つの画像を調整しようとしてどちらかの右marginを作ると両方ともmarginが出てしまい、うまくレイアウトできません。

どのような方法で右マージンを作ろうとしているのか分かりませんので、恐らくになりますが、
box-img01内のimgタグに右マージンをつけたいのでしたら

.box-img01 img{
  margin-right:10px;
}

box-img内でしたら

.box-img img{
  margin-right:10px;
}

これでご希望にそう回答になっているでしょうか？

Comments

[let]

ご教授いただきありがとうございます。
どちらも試してみましたが下部の画像もうごいてしまいます。上部の画像だけうごかしたいのでうまくいきませんでした。

Answer 2

「縦並びをあわせたい」とは具体的にどのようにしたいのでしょうか。

２の画像のセンターを揃えたい（親ボックス内での中央寄せ）なら、親要素にtext-align: center;、右側を合わせてたい（親ボックス内での右寄せ）ならtext-align: right; を設定すればいいでしょう。
親要素は、.float-claerなので、

.float-claer {
  overflow: hidden;
  text-align: right; /* 右寄せ */
}

Comments

[let]

返信が遅くなり大変申し訳ありません。
上部の画像のみ動くのですが、もう少し右側にmarginをとりたいのですが、margin-rightを入れると二個の画像にmarginが入ってしまいます。これは親要素に子要素の位置を指定していると認識で間違いないですよね？

[hatena19]

その説明では結局どうしたいのか分かりませんが、エスパーすると、下記のような感じかな?

.box-img01{
margin-right: 0;
margin-bottom: 0.5em;
}
.box-img{
margin-top: 10px;
margin-right: 0;
margin-bottom: 0.5em;
}
.float-claer{
overflow: hidden;
text-align: right;
margin-right: 10px;
}

[hatena19]

現状は、.float-claer が .menu の flex の設定で右端によっている。
.float-claerの幅は、子要素（box-img01、 box-img）の広い方の幅になっている。
子要素（box-img01、 box-img）はブロックレベル要素なので、親要素の幅一杯に広がっている。
img要素はインライン要素なので box-img01、 box-img 内で text-align の設定に従ってレイアウトされる。text-align: right; なら右寄せになる。
ということが理解できれば思い通りにレイアウトできるようになると思います。

ブラウザの検証ツールの使えば上記のことが視覚的に理解できると思います。

[let]

子要素の広い方の幅になっているので個別で設定できないのですね。
下部にある画像の方が広いのでそちらが優先になってしまっているんですね。
個別にしないと調整は難しそうですね

[hatena19]

いえ、親要素に text-align: right; を設定しておけば、.box-img01 または .box-img に個別に margin-right を設定できます。margin-right を設定すれば親要素がそれに合わせて広がりますので。

例えば、.box-img01 だけ10pxの右マージンを設定したいなら、

.box-img01{
margin-right: 0;
margin-bottom: 0.5em;
}
.box-img{
margin-top: 10px;
margin-right: 10px;
margin-bottom: 0.5em;
}
.float-claer{
overflow: hidden;
text-align: right;
}

[let]

個別に設定できました。ありがとうございます。
もっと勉強しないとうまくできないですね
これからも精進します。