PCもスマホも文章の長さによって矢印ボタンの位置が変わってしまいます。スマホサイズからドラッグしてPCサイズにする途中で文章が下に行ってしまいます。

PCもスマホもまた文章の長さによって矢印ボタンの位置が変わってしまいますので位置固定したいです。スマホサイズからドラッグしてPCサイズに拡大する途中で文章が下に行ってしまいます。ドラッグしてPCサイズに拡大途中でも文章は画像の横に配置したいです。

下の画像のように、文章の長さによって画像矢印ボタンの位置が変わってしまう。

HTMLコード
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">	
<title>キャラクター紹介ミスターマック</title>
<script src="java/jquery-3.3.1.min.js"></script>
<script src="java/jquery.waypoints.min.js"></script>
<script src="java/smooth-scroll.js"></script>
<script src="java/Main.js"></script>

<link href="CSS/Charactor.css" rel="stylesheet" type="text/css">
<link href="CSS/CommonCSS.css" rel="stylesheet" type="text/css">	
</head>

<body>
<header>
  <div class="inner"> <a href="Index.html"><h1>LOGO</h1>
    </a> 
    <!--スマホのメニューボタンここから-->
    <p class="button"> <span></span> <span></span> <span></span> </p>
    <!--スマホのメニューボタンここまで--> 
    <!--<nav role="navigation" style="margin-top: 93px;">-->
    <nav role="navigation"> 
      <!--<ul class="clearfix">-->
      <ul id="nav">
        <li><a href="Newspage.html">ニュース</a></li>
        <li><a href="#">キャストスタッフ</a></li>
        <li><a href="Intorodaction.html">紹介</a></li>
        <li><a href="Story.html">あらすじ</a></li>
        <li><a href="#">登場人物</a></li>
        <li><a href="#">劇場情報</a></li>
      </ul>
    </nav>
  </div>
</header>
	
<div id="wrap">
<main>
<div id="contents">
<section>
<div class="clearfix">
<img src="images/Mac AdasonPR.png" alt="ミスターマック仮画像">	
<div class="text">
<h5>マック・アダソン <br>通称ミスターマック </h5>

<h6>CV　渡辺　信行</h6>
<div class="wrapper">
<p>ミスタージェイムズの弟。<br>兄を慕っていて組織の副ボスとして仕事している。また、薬物犯罪組織アメリカンギャングボーイのボスもしている。<br>白人系米国人ながらも、金髪と肌の色と目の色が兄より少し濃い。見分ける方法はその部分だ。</p>
	
	<div class="next">
	<ul class="imgWrap">
		<li class="botton"><a href="charactor.html"><img src="images/left.png" alt="前へ"></a></li>
		<li class="botton"><a href="#"><img  src="images/close.png" alt="閉じる"></a></li>
		<li class="botton"><a href="charactor Arachnea Adason.html"><img src="images/right.png" alt="次へ"></a></li>
</ul>
	</div>
	</div>
	</div>
	</div>	
</section>
</div>	
</main>
</div>

<div class="pagetop"><a href="#"><img src="images/pagetop.png" alt="トップに戻る"></a></div>	

<footer>
  <nav>
    <ul>
      <li><a href="#">ラインのマーク</a></li>
      <li><a href="#">フェイスブックのマーク</a></li>
      <li><a href="#">ツイッターマーク</a></li>
    </ul>
  </nav>
  <p>文章</p>
  <p>製作委員会</p>
</footer>
</body>
</html>

CSSコード
section img{
	margin-left: 150px;
	margin-right: 0px;
	margin-top: 40px;
	margin-bottom: 0px;
	width: 30%;
}
section.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.text{
	float: right;
	padding-top: 70px;
}
.wrapper{
	margin-right: 60px;
	max-width: 700px;
	font-size: 20px;
	line-height: 3.0em;
}

section h5{
	font-size: 30px;
	font-weight: 600;
}

section h6{
	font-size: 25px;
	font-weight:500;
}

.next ul li{
	list-style-type: none;
	width: 20%;
	float: left;
	padding-top: 40px;
	
}



@media screen and (max-width:680px) {
	
	section img{
		margin-left: 40px;
		margin-right: 40px;
		margin-top: 60px;
		margin-bottom: 50px;
		width: 80%;
		}
	
	.text{
		float: none;
		padding: 30px;
	}
	
	section h5,h6{
	text-align: center;
	}
	
	
	.wrapper{
		margin-right: 0px;
		max-width: 800px;
	}
	
	.next ul li{

	width: 15%;
	
	}
}

退会済みユーザー

2018/11/16 06:03 編集

矢印というのは <p class="button"> <span></span> <span></span> <span></span> </p> というところでしょうか？

退会済みユーザー

2018/11/16 06:11 編集

違います。 <div class="next"> <ul class="imgWrap"> <li class="botton"><a href="charactorAIIBSO Agent.html"><img src="images/left.png" alt="前へ"></a></li> <li class="botton"><a href="#"><img src="images/close.png" alt="閉じる"></a></li> <li class="botton"><a href="charactor Mac Adason.html"><img src="images/right.png" alt="次へ"></a></li> </ul> </div>　部分です。

退会済みユーザー

2018/11/16 06:33

矢印とばってんボタンは画像でやっています。

退会済みユーザー

2018/11/16 06:56

Lhankorさん、それをやったら横並びの矢印とばってんボタン画像が大きくなってしまい、横並びではなくなってしまいました。

退会済みユーザー

2018/11/16 06:57

それは回答の下のコメント欄に書いてください

Lhankor_Mhy

2018/11/16 09:26

『文章の長さによって矢印ボタンの位置が変わってしまいます』とは具体的にはどう変わりますか？　垂直に変わるのですか？　それとも水平ですか？　それとも全く違う場所に表示されるのですか？

退会済みユーザー

2018/11/16 09:29

多分水平です。文章が短いと矢印が上に上がってしまい、短いと水平に下がってきてしまいます。

Lhankor_Mhy

2018/11/16 09:48

「水平に下がる」という状況を想像できません。垂直に変化するということでいいのでしょうか？

退会済みユーザー

2018/11/16 10:14

多分そうです。編集で画像貼れましたら配置します。

Lhankor_Mhy

2018/11/16 12:45

画像を見ましたが、変化が読み取れません。どのようにしたいのかわかりませんでした。

退会済みユーザー

2018/11/16 12:51

変化が読み取れないということはコード直しても変わらなかったということでしょうか？もしそういうことなら自己解決します。

Lhankor_Mhy

2018/11/17 05:17

退会したのか。最後まで日本語が通じない人だったな。

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

回答1件

ベストアンサー

css
1/* 追加 */
2.next {
3	text-align: center;
4}
5/* 追加ここまで */
6.next ul li {
7	list-style-type: none;
8	width: 20%;
9	/* これは削除　float: left; */
10	padding-top: 40px;
11	display: inline; /* 追加 */
12}

コメントを受けて追記

PCサイズにする途中で文章が下に行ってしまいます。その場合でも画像の隣に文章を維持したい

CSS
1/* これを削除
2.text{
3    float: right;
4    padding-top: 70px;
5}
6 削除ここまで*/
7
8/* 追加（適切に class をつけてください） */
9#contents > section > .clearfix > img {
10	float: left;
11}
12/* 追加ここまで */