ページのサイズを変えてもレイアウトを崩したくない

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>練習</title>
6    <link rel="stylesheet" type="text/css" href="for-parctice.css">
7  </head>
8
9  <body>
10    <div class="soto">
11      <image class="image" src="mori.jpg">
12        <div class="naka">
13          <h1>画像のタイトル</h1>
14          <p>画像のせつめい画像のせつめい画像のせつめい画像のせつめい画像のせつめい画像のせつめい画像のせつめい画像のせつめい
15        </div>
16    </div>
17
18  </body>
19</html>

css
1.soto{
2  position: relative;
3}
4.image{
5    width: 300px;
6}
7.naka{
8  position: absolute;
9  top: 0;
10  left: 350px;
11  width: 300px;
12  background:yellow;
13}
14```![![イメージ説明](1a6cda9f94381133e57bf284c080dd77.png)
15
16
17このようなコードで画像の隣に文章のまとまりを置いてるのですが、
18右の文章のまとまりをleftからのpxで調節するとページのサイズによっては全部が見えなくて
19％で調節するとページのサイズを小さくするとレイアウトがぐちゃぐちゃになってしまうのですが
20何か対策等はありますか？

Lhankor_Mhy

2019/05/30 11:29

ぐちゃぐちゃになるコードをご提示いただけますか？

m.ts10806

2019/05/30 12:19

link タグ閉じてないみたいですが、転記ミスではないですか？

lilbear

2019/05/30 12:24

```css .soto{ position: relative; } .image{ width: 300px; } .naka{ position: absolute; top: 0; left: 50%; width: 300px; background:yellow; } ``` pxの部分を％に変えました。ぐちゃぐちゃというか画像が文章のまとまりと重なってしまいます。ページを狭くしても重なり合わないようにってできますか？

lilbear

2019/05/30 12:48

すいませんタグ閉じ忘れていました。でもこれを直してみたのですが、変わらないです。

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

回答2件

ベストアンサー

たとえば、こんな感じでしょうか？

css
1.soto {
2  position: relative;
3}
4.image {
5  width: 300px;
6}
7.naka {
8  position: absolute;
9  top: 0;
10  left: 350px;
11  width: calc( 100% - 350px );
12  max-width: 300px;
13  background:yellow;
14}