<div class="image"></div>
<div class="sentence"></div>
上記でPC向けにサイトを作った後、スマホ用にレスポンシブ対応することになったのですが
.imageを.sentenceの下に潜り込ませるにはどうすればいいでしょうか
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加する論理構造が逆になることが許容範囲であれば、以下で可能です。
このソースの肝は、
.wrapper {
position: relative;
}
.images {
position: absolute;
top: 0;
}
.sentence {
padding-top: 150px; /* 画像の高さ */
}
<div class="wrapper">
<div class="sentence">Lorem ipsum</div>
<div class="images"><img src="https://placehold.jp/150x150.png" alt=""></div>
</div>
もう一つの解。
画像の縦横比が決まっているのであれば、以下。
.wrapper {
position: relative;
padding-bottom: 75%; /* 画像の比率 縦/横 */
}
img {
width: 100%;
height: auto;
position: absolute;
bottom: 0;
}
<div class="wrapper">
<div class="images"><img src="https://placehold.jp/400x300.png" alt=""></div>
<div class="sentence">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi error quae autem, quod ad eveniet hic tempora tenetur nemo animi natus magnam maxime in rerum, modi, rem assumenda ea exercitationem?</div>
</div>
単純に、表示するレイアウトの話でしょうか。
全体がみえないのでなんとも言えませんが
CSSで解決するのは難しい、または推奨出来ないかなと思います。
シンプルに要素を入れ替えてしまいたいのであれば
jQueryなりで操作をするのが良いと思います。
CSSで解決するには、下記のような記述が必要になります。
動的に高さが変動する場合は難しいですし
何よりも、おすすめできる書き方ではありません。
jQueryのコードもコメントアウトし記述しておきましたので
こちらで解決するのが望ましいかと思います。
他の要素も有る場合はinsertAfter
等も活用してみてください。
//$('.image').appendTo('.container');
.image{
width:100px;
height:100px;
margin:10px;
background:red;
/* 以下位置調整 */
position:relative;
top: 110px;
}
.sentence{
width:100px;
height:100px;
margin:10px;
background:blue;
/* 以下位置調整 */
position:relative;
top: -110px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="image">上の要素</div>
<div class="sentence">下の要素</div>
</div>