html – 根据类别将文本从右侧移动到下方

概述我试图根据图像的方向移动文本,但是我无法将文本内容放在我想要的位置. 我到底有多远： https://jsfiddle.net/sj9jgvyq/16/ $(document).ready(function() { $(".change").click(function() { if ( $(".content").hasClass("landscape")) { $(".con 我试图根据图像的方向移动文本,但是我无法将文本内容放在我想要的位置.

我到底有多远：

https://jsfiddle.net/sj9jgvyq/16/

$(document).ready(function() {	$(".change").click(function() {  	if ( $(".content").hasClass("landscape")) {    	$(".content").removeClass("landscape");      $(".content").addClass("portrait");      $("img").attr("src","http://placehold.it/200x400")    } else {    	$(".content").addClass("landscape");      $(".content").removeClass("portrait");      $("img").attr("src","http://placehold.it/400x200")    }  });});

.content.landscape .first {  display: inline-block;}.content.landscape .second {  display: inline-block;  vertical-align: top;}.content.landscape .third {  display: block;}.content.landscape .change {  display: block;}.content.portrait .first {  display: inline-block;}.content.portrait .second {  display: inline-block;  vertical-align: top;}.content.portrait .third {  display: inline-block;}.content.portrait .change {  display: block;}

<script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/2.1.1/jquery.min.Js"></script><div >   <button >    Change  </button>  <div >    <img src="http://placehold.it/400x200">  </div>  <div >    Text Second  </div>  <div >    Text Third  </div></div>

我想要的是“第三文本”在纵向下面是“第二文本”,在横向时是在图像下面.

按按钮查看更改.如果可能的话,更喜欢没有JavaScript的解决方案.

澄清：我知道如何检测方向,但我无法将文本内容放在我想要的位置.

解决方法 要使用纯CSS执行此 *** 作,您将需要使用@media查询.将纵向作为默认布局,如果屏幕足够宽,则使用媒体查询更改为横向视图.

例如(使用400px作为更改布局的宽度)：

.content {    .first {        display: inline-block;    }    .second {       display: inline-block;       vertical-align: top;    }    .third {       display: inline-block;    }    .change {       display: block;    }}@media (min-wIDth: 400px) {    .third {        display: block;    }}

有关媒体查询的更多信息,您可以查看here

总结

以上是内存溢出为你收集整理的html – 根据类别将文本从右侧移动到下方全部内容，希望文章能够帮你解决html – 根据类别将文本从右侧移动到下方所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。