付属画像の1794×400の画像の下の1794 ×200の高さを200pxにして表示させたいのですが

締切済

質問者：pjdmgam
質問日時：2021/06/03 08:14
回答数：2件

付属画像の1794×400の画像の下の1794 ×200の高さを200pxにして表示させたいのですが、高さを２００ｐｘに変更しても上の画像の高さが適応されてしまいます。上の画像 1794×400高さと幅はそのままで、下の画像の高さのみ変更するにはどうしたらよいでしょうか？.kodai2{
height: 200px;反映されません。

コード以下にあります。回答よろしくお願いいたします。

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title></title>
<style>
* { margin : 0;
padding : 0;
-webkit-box-sizing : border-box;
box-sizing : border-box;
}

.box {
height : 56px;
width : 100%;
background-color : #0fd;
}
.wrap{
width : 100%;
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-ms-flex-wrap : nowrap;
flex-wrap : nowrap;
padding-bottom : 30px;
}
.wrap .wrap_inner_left {
width : 300px;
}
.wrap .wrap_inner_left ul {
width : 300px;
}
.wrap .wrap_inner_left ul li {
color : #444;
list-style-type : none;
width : 300px;
height : 30px;
line-height : 30px;
padding-left : 20px;
border-bottom : solid 1px #53535352;
background-color : #f6f4f4;

}
.wrap .wrap_inner_left ul li:first-child {
border-top : solid 1px #53535352;
}
.wrap .wrap_inner_right {
width : 100%;

}
/* トップの画像のスタイル */
.wrap .wrap_inner_right img {
width : 100%;
height: 400px;
}
.kodai2{
height: 200px;
}

/* 画像の下の右の太文字タイトル */
.mozi1{

font-size: 36px;/* 文字の大きさ */
font-weight: 900;/* 文字の太さ */
text-align: center;/* 文字を中央に配置 */
color: #63e02d;

margin-top: 19px;/* 上の余白 */
}

</style>
</head>
<body>
<div class="box">正方形</div>

<div class="wrap">

<div class="wrap_inner_left">

<ul>
<li>使い方・マニュアル</li>
<li></li>
<li></li>
<li>翻訳機能</li>
<li>英語</li>
<li>中国語</li>
<li>スペイン語</li>
<li>フランス語</li>
<li>ロシア語</li>
<li>アラビア語</li>
<li>a</li>
<li>a</li>
<li>ヘルプ</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>w</li>
<li>s</li>
<li>mmmm</li>
<li>ログアウト</li>
</ul>
</div>
<div class="wrap_inner_right">
<img src="https://placehold.jp/1794x400.png">
<div class="kodai2">
<img src="https://placehold.jp/1794x200.png">
</div >
</div> </div>
</body> </html>