画面を小さくした時に2つ目の画像が文章に重なってしまう。
画面を小さくした時に2つ目の画像が文章に重なってしまう。
画像の隣に文章を表示する形で合計3つ縦に並べたいのですが画面を小さくした時に2つ目の画像が文章に重なってしまいます。どう修正すればよろしいでしょうか。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>あいうえお商店</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/bootstrap-timepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
section{
width: 80%;
margin: 0 auto;
}
p{
width: 45%;
}
img{
width: 50%;
}
.right-p{
padding-left: 5%;
float: right;
}
.left-p{
padding-right: 5%;
float: left;
}
</style>
</head>
<body>
<section>
<img src="GAZOU.JPG">
<p class="right-p">1aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</section>
<section>
<img src="GAZOU.JPG">
<p class="left-p">2aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</section>
<section>
<img src="GAZOU.JPG">
<p class="right-p">3aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaavaaavaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</section>
<p>bbb</p>
</body>
</html>