css - 为什么我的布局在移动设备上向左折叠？-6ren

css - 为什么我的布局在移动设备上向左折叠？

转载作者：太空宇宙更新时间：2023-11-04 10:13:36

当我将我的网站缩小到移动设备时，会发生一些非常奇怪的事情。除了图像之外的所有内容似乎都被迫向左，并且无法覆盖整个宽度。为什么会这样？/我该如何解决？\

* {
  margin: 0;
  padding: 0;
}

.entry-header {
  display: none;
}

body {
  overflow-x: hidden;
  width: 100%;
}

:root {
  background: #fff;
}

#logo {
  display: block;
  margin: auto;
  width: 200px;
  text-align: center;
}

nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  background: #38b449;
  color: #fff;
  font-size: 1.5rem;
  font-family: 'Segoe UI', sans-serif;
}

li.selected {
  color: #f05a2a;
}

nav ul li:hover {
  color: springgreen;
  cursor: pointer;
}

nav ul li.selected:hover {
  color: #f07a2a;
}

main * {
  margin: 20px auto;
}

#btns {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}

#btns input {
  width: 30%;
  display: block;
  padding: 10px;
  background: springgreen;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  font-family: 'Verdana';
}

#btns input:hover {
  background: #f05a2a;
  cursor: pointer;
}

main p {
  text-align: center;
  max-width: 80%;
  font-size: 1.5rem;
  font-family: 'Segoe UI';
}

main {
width:100%;
}

main p:nth-of-type(4) {
  font-weight: bold;
}

main hr {
  width: 100%;
  background: #0a0;
  height: 1px;
}

.img-c {
  width: 40%;
  background-color: #000;
  max-width: 200px;
  min-width: 50px;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 200%;
}

main div {
  display: flex;
  justify-content: space-between;
}

main > div {
  justify-content: flex-end;
  width: 100%;
  margin: auto;
}

@media screen and (max-width: 416px) {
  .img-c {
    width: 40%;
  }
  
  main > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 358px) {
  nav ul {
    flex-direction: column;
    padding: 0;
  }
  
  nav ul li {
    width: 100%;
    text-align: center;
  }
  
  nav ul li:nth-child(2n) {
    background: #0c0;
  }
}

.entry-footer {
	background: #efe;
}

article {
width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en-US" class="no-js gr__computerimmersion_com"><head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="http://www.computerimmersion.com/beta/xmlrpc.php">
	<link rel="stylesheet" href="http://computerimmersion.com/beta/wp-content/themes/twentyfifteen/style.css">
	<!--[if lt IE 9]>
	<script src="http://www.computerimmersion.com/beta/wp-content/themes/twentyfifteen/js/html5.js"></script>
	<![endif]-->

</head>
<body class="page page-id-165 page-template-default" data-gr-c-s-loaded="true">
		
<article id="post-165" class="post-165 page type-page status-publish hentry">
	
	<header class="entry-header">
		<h1 class="entry-title">beta-main</h1>	</header><!-- .entry-header -->

	<div class="entry-content">
		<header>
  <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/CompImmer_logo_final_web4.png" id="logo" alt="logo"><p></p>
<nav>
<ul>
<li class="selected">Home</li>
<li>About</li>
<li>Classes</li>
<li>Jobs</li>
</ul>
</nav>
</header>
<p></p><main><p></p>
<div id="btns">
  <input type="button" id="open-contact" value="Contact"><br>
  <input type="button" id="open-player" value="Media">
</div>
<div>
<div class="container">
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/2.jpg" alt="img" class="img-c" style="height: 200px;"><br>
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/5.jpg" alt="img" class="img-c" style="height: 200px; background: magenta;">
      </div>
<div class="container">
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/1.jpg" alt="img" class="img-c" style="height: 200px;"><br>
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/4.jpg" alt="img" class="img-c" style="height: 200px; background: magenta;">
    </div>
<p></p></div>
<p>Are you looking for computer classes that go beyond the typical summer camp or one-day experience?</p>
<p>Does your child have an interest in coding or computer hardware and want to learn what to do next?</p>
<p>Computer Immersion has the answer!</p>
<p>We teach computer science and tech culture to children who are 12-18 years old. Our classes immerse students in a wide range of hardware and software related topics such as scripting, coding, “tech speak”, networking, and hardware.</p>
<p>Our classes are taught by instructors with real world industry experience and meet for 9-week sessions at locations convenient for you.</p>
<p></p></main><br>
<script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script><br>
<script>
   function setHeight() {
	$('.img-c').css('height', $('.img-c').innerWidth());
   }
   setInterval(setHeight, 10);
</script><p></p>
			</div><!-- .entry-content -->

	
</article><!-- #post-## -->


	<footer id="colophon" class="site-footer" role="contentinfo">
		<img class="icon" id="facebook" src="http://computerimmersion.com/beta/wp-content/facebook.png" alt="face">
		<img class="icon" id="facebook" src="http://computerimmersion.com/beta/wp-content/facebook.png" alt="twitter">
		<p id="copy">© 2016</p>
	</footer><!-- .site-footer -->


</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span></html>

最佳答案

这里的问题是您需要将 flex 对齐方式从 row 更改为 column 并且容器的宽度为 200%过了屏幕。

* {
  margin: 0;
  padding: 0;
}

.entry-header {
  display: none;
}

body {
  overflow-x: hidden;
  width: 100%;
}

:root {
  background: #fff;
}

#logo {
  display: block;
  margin: auto;
  width: 200px;
  text-align: center;
}

nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  background: #38b449;
  color: #fff;
  font-size: 1.5rem;
  font-family: 'Segoe UI', sans-serif;
}

li.selected {
  color: #f05a2a;
}

nav ul li:hover {
  color: springgreen;
  cursor: pointer;
}

nav ul li.selected:hover {
  color: #f07a2a;
}

main * {
  margin: 20px auto;
}

#btns {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}

#btns input {
  width: 30%;
  display: block;
  padding: 10px;
  background: springgreen;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  font-family: 'Verdana';
}

#btns input:hover {
  background: #f05a2a;
  cursor: pointer;
}

main p {
  text-align: center;
  max-width: 80%;
  font-size: 1.5rem;
  font-family: 'Segoe UI';
}

main {
width:100%;
}

main p:nth-of-type(4) {
  font-weight: bold;
}

main hr {
  width: 100%;
  background: #0a0;
  height: 1px;
}

.img-c {
  width: 40%;
  background-color: #000;
  max-width: 200px;
  min-width: 50px;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 200%;
}

main div {
  display: flex;
  justify-content: space-between;
}

main > div {
  justify-content: flex-end;
  width: 100%;
  margin: auto;
}

@media screen and (max-width: 416px) {
  .img-c {
    width: 100%;
  }
  
  .container {
    flex-direction: column;
    width: 100% !important;
   }
  
  main > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 358px) {
  nav ul {
    flex-direction: column;
    padding: 0;
  }
  
  nav ul li {
    width: 100%;
    text-align: center;
  }
  
  nav ul li:nth-child(2n) {
    background: #0c0;
  }
}

.entry-footer {
	background: #efe;
}

article {
width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en-US" class="no-js gr__computerimmersion_com"><head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="http://www.computerimmersion.com/beta/xmlrpc.php">
	<link rel="stylesheet" href="http://computerimmersion.com/beta/wp-content/themes/twentyfifteen/style.css">
	<!--[if lt IE 9]>
	<script src="http://www.computerimmersion.com/beta/wp-content/themes/twentyfifteen/js/html5.js"></script>
	<![endif]-->

</head>
<body class="page page-id-165 page-template-default" data-gr-c-s-loaded="true">
		
<article id="post-165" class="post-165 page type-page status-publish hentry">
	
	<header class="entry-header">
		<h1 class="entry-title">beta-main</h1>	</header><!-- .entry-header -->

	<div class="entry-content">
		<header>
  <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/CompImmer_logo_final_web4.png" id="logo" alt="logo"><p></p>
<nav>
<ul>
<li class="selected">Home</li>
<li>About</li>
<li>Classes</li>
<li>Jobs</li>
</ul>
</nav>
</header>
<p></p><main><p></p>
<div id="btns">
  <input type="button" id="open-contact" value="Contact"><br>
  <input type="button" id="open-player" value="Media">
</div>
<div>
<div class="container">
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/2.jpg" alt="img" class="img-c" style="height: 200px;"><br>
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/5.jpg" alt="img" class="img-c" style="height: 200px; background: magenta;">
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/1.jpg" alt="img" class="img-c" style="height: 200px;"><br>
    <img src="http://www.computerimmersion.com/wp-content/uploads/2015/10/4.jpg" alt="img" class="img-c" style="height: 200px; background: magenta;">
    </div>
<p></p></div>
<p>Are you looking for computer classes that go beyond the typical summer camp or one-day experience?</p>
<p>Does your child have an interest in coding or computer hardware and want to learn what to do next?</p>
<p>Computer Immersion has the answer!</p>
<p>We teach computer science and tech culture to children who are 12-18 years old. Our classes immerse students in a wide range of hardware and software related topics such as scripting, coding, “tech speak”, networking, and hardware.</p>
<p>Our classes are taught by instructors with real world industry experience and meet for 9-week sessions at locations convenient for you.</p>
<p></p></main><br>
<script src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script><br>
<script>
   function setHeight() {
	$('.img-c').css('height', $('.img-c').innerWidth());
   }
   setInterval(setHeight, 10);
</script><p></p>
			</div><!-- .entry-content -->

	
</article><!-- #post-## -->


	<footer id="colophon" class="site-footer" role="contentinfo">
		<img class="icon" id="facebook" src="http://computerimmersion.com/beta/wp-content/facebook.png" alt="face">
		<img class="icon" id="facebook" src="http://computerimmersion.com/beta/wp-content/facebook.png" alt="twitter">
		<p id="copy">© 2016</p>
	</footer><!-- .site-footer -->


</body><span class="gr__tooltip"><span class="gr__tooltip-content"></span><i class="gr__tooltip-logo"></i><span class="gr__triangle"></span></span></html>

关于css - 为什么我的布局在移动设备上向左折叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37395267/

文章推荐： python - 使用 json 数据在 python 中追加文本文件

文章推荐： java - 访问docker环境之外的数据库

文章推荐：字符串连接中的 Python 内联条件

文章推荐： Java:如何原子地替换映射中的所有值？

javascript - Aptana 折叠/折叠 javascript 代码
我需要能够在我的 javascript 中折叠/折叠各种代码片段，有点像 C# 中的#region #endregion。我找不到执行此操作的方法，有什么帮助吗？最佳答案窗口菜单 -> 选择首选项
javascript - 折叠 Accordion 时，边框会在此期间消失，折叠 Accordion 时边框如何可见？
折叠 Accordion 时，我注意到在这段时间内没有显示边框。例如，当 Accordion 展开时，我们会在展开时看到边界。这也可以在折叠 Accordion 时完成吗？ Accordion 折叠时
sublimetext2 - 折叠/折叠 sublime text 2 中的异常(exception)代码部分
是否有任何插件或快捷方式可以隐藏 Sublime Text 2 中除代码部分之外的所有内容？我需要一次折叠除部分之外的所有部分，而不是一次折叠一个部分。谢谢~ 最佳答案如果将鼠标悬停在行号上，您
scala - 折叠\/[A,A] 到 A
在 Web 应用程序中，我有一个操作可能会以各种不同的方式失败，或者最终会成功。在这种情况下，成功和失败由 SimpleResult 的子类表示(表示 HTTP 响应) 我使用 scalaz/上的
vba - 折叠/展开部分中的行
我的数据在这样的分组方案中分为三个连续的类别: 因此，整个“OCM”组被分解为名为“N/A”、“Financials”、“Industrials”等的子组，每个子组又被分解为进一步的子组。我在 Ex
scala - 折叠 NonEmptyList
我正在尝试猫图书馆，但我很难在我应该导入和创建的东西之间导航。我的问题如下: sealed trait Checks case class CheckViolation(id: Long, msg:
Vim 折叠 - 标记打开的折叠
有没有办法查看当前文件中打开的折叠位置？我个人在打开折叠和移动时遇到问题，我无法找到折叠开始的线!也许有一个选项可以在数字旁边设置一个漂亮的折叠提示。也许是这样的: + 1 void myfunc(
基于空白深度的 Notepad++ 折叠
我正在寻找一种按空白深度折叠纯文本的方法。我更喜欢 Notepad++ 解决方案，但如果它只能在另一个编辑器中完成，我可以处理。例如 Header is arbitrary text Child i
jsTree 节点展开/折叠
今天早上我遇到了优秀的 jstree jQuery UI 插件。一句话——太棒了!它易于使用，易于样式化，并且可以按照包装盒上的说明进行操作。我还没有弄清楚的一件事是 - 在我的应用程序中，我想确
wpf - 折叠/展开组框
我有以下XAML，其中堆叠了三个组框。这些组框的标题中是复选框。我想要实现的是:当我选中/取消选中一个框时，我希望相应的groupbox能够以平滑的动画缓慢展开/折叠。我正在Blend 4中尝试此
Vim 折叠 - 在光标下递归关闭所有子项
我知道如何使用 zO 打开光标下的所有折叠. 但是反向怎么做呢？我想要类似 za 的东西确实如此，但也具有递归性。附注。我知道有 zC ，但它会关闭与当前行相关的所有父级折叠，我想关闭子级。最佳
jquery - 如何防止导航栏在单击具有下拉类的特定菜单项时隐藏/折叠？
我试图防止点击 About Us 时导航栏崩溃部分或 Projects以下代码中的部分。我已经尝试过event.stopPropagation()在这两个按钮上，但是当 jQuery 代码执行时，导航
wpf - 我需要对RowDetailsTemplate进行扩展/折叠
我有一个DataGrid。它具有DataGrid.RowDetailsTemplate。当单击一个按钮时，它应该展开/折叠；我该怎么做？
wpf - 使用XAML完成Storyboard时将元素的可见性设置为“折叠”
我有一个 Storyboard动画，使用Opacity属性可以使控件淡出 View 。完成后，我想将控件的“可见性”设置为“折叠”。我也想做相反的事情...将“可见性”设置为“可见”，然后使用 St
SublimeText3 折叠/展开所有方法
我将 SublimeText3 用于 C++ 和 Java。我想知道是否有办法折叠文件/类中的所有方法，然后将它们全部展开，而不管插入符号在哪里。或者有没有办法列出所有的功能/方法。基本上我希望能够
没有空格的 YAML 折叠
如何在 YAML 中断开长字符串(如长 url 或文件名/路径)，而不会将换行符变成空格？示例输入: url: > https://example.com/?what=Lorem %20ip
scala - 折叠 HList？
给定: import shapeless._ case class F(x: Option[Int], y: Option[Int]) 我想帮忙写一个函数，f: def f(Option[Int]::
JavaScript:在reduce方法中引用剩余的数组(折叠)？
我想测试数组是否仅包含唯一元素，我的解决方案如下: function uniqueElements(a) { var r = true; while (a) { var [el, a]
javascript - HTML制作菜单展开/折叠
我试图在单击“项目”按钮时使“javascript 项目”和“CGI 项目”滑动切换。但是，我不太明白为什么点击时只有CGI项目按钮切换，而javascript项目按钮保持不变？我正在尝试使用 Jq
javascript - 单击标题时动态展开/折叠
我有一组需要在 UI 中显示的项目，例如标题和其下的项目列表。有一个父组件，我将在其中将此数据传递到如下所示的文件. 在此基础上显示了父子布局。现在我需要根据标题的点击展开/折叠。有一个可以附加

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 为什么我的布局在移动设备上向左折叠？