1

私が知る限り、「absolute」タグは私のテーマのレスポンシブ デザインに対応しません。

画像の div コンテナーを全幅のウィンドウに適切な数で配置すると (逆も同様)、ブラウザー ウィンドウを締めると、他の要素と一緒に浮きません。

ここに画像の説明を入力

ここに画像の説明を入力

自分自身を理解するまでには、かなりの時間がかかると思います。

4

2 に答える 2

0

画像から最小幅を外すと、正しくサイズ変更されます。最小幅は、正しくサイズ変更することを制限しています。小さくならないようにするには、最小幅を使用して 700px 未満にすることができます。これは、サイズの小さなジャンプにすぎないためです。メディア クエリを使用して、その画面サイズで幅を 70% にすることもできます。

これがあなたがやりたいことだと思いますか？

于 2013-05-05T09:17:48.517 に答える
0

position: absoluteページ レイアウトに使用することはめったにありません (あちこちの小さな要素を除きます)。これは、要素をドキュメントの流れから外してしまうためです。つまり、他の要素はそれに対応できません。

犬の画像を右に浮かせ、「土のう」効果を使用してテキストの下に押し込むことで、必要な効果を得ることができます。これがどのように機能するかの基本的な例を次に示します。

http://codepen.io/anon/pen/uymJI

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.outer {overflow: hidden;}

.wrapper {width: 50%; margin: 0 auto;}

.image {
  float: right;
  margin-right: -600px;
}

.image:before {
  content: " ";
  height: 300px;
  width: 1px;
  overflow: hidden;
}
</style>

</head>
<body>
<div class="outer">
    <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

        <div class="image"><img src="http://podstrigis.com/wp-content/uploads/2013/05/1dreamstime_xxl_25491444.png" alt="Dog listening on can phone"></div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>



        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
</div>

</body>
</html>

編集：以下のコメントに基づいて、別の（最終的には不十分ですが）試み：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.outer {overflow: hidden;}

.wrapper {width: 50%; margin: 0 auto; }

.ofl {overflow: hidden;}

.image {float: right; margin-right: -600px;}

.map {clear: both; }

.map div {width: 100%; height: 300px; background: green;}

@media only screen and (min-width: 1500px) {
    .image {margin-top: 0;}

    .dog {margin-top: -258px;}

    .spacer {float: right; width: 300px; height: 265px; background: white;}

    .map {margin-top: 258px;}

    .spacer:before {
        content: " ";
        height: 300px;
        width: 1px;
        overflow: hidden; 
        }
}
</style>

</head>
<body>
<div class="outer">
    <div class="wrapper ofl">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>



        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><div class="spacer"></div>



        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

    </div>

    <div class="wrapper dog">
        <div class="image"><img src="http://podstrigis.com/wp-content/uploads/2013/05/1dreamstime_xxl_25491444.png" alt="Dog listening on can phone"></div>
        </div>
    <div class="wrapper ofl map">
        <div></div>
    </div> 
</div>

</body>
</html>
于 2013-05-05T09:18:08.953 に答える