html - 当媒体查询为 992px 及以上时，我无法让我的 html 程序中的部分继续在一行上

Question

我正在用 html 制作一个程序，我相信我有正确的代码，但是，我想要它做的是行不通的。该程序应该有 3 个部分，当浏览器窗口为 992px 及以上时，我希望所有部分都保持在同一行，并且当您使浏览器变宽和变窄时，我希望这些部分变得更宽和更窄。在平板电脑 View 中(介于 768 像素和 991 像素之间，含)，前两个部分应位于第一行且大小相等。第三部分应该在第二行并且单独占据整行。在移动 View 中(等于或小于 767px)，每个部分应占据整行。

这是我的程序的链接，

http://codepen.io/Zaniac/pen/zBpKza

* {
		box-sizing: border-box;
	}
	/**********BaseStyles***********/

	.section{
		border:5px solid blue;
		background-color: grey;
		padding:5px;
		margin:5px;
	}

	#lorem{
		float: right;
		top:0;
		border: 5px solid red;
		margin:-10px;
		padding: 3px;
		background-color: white;
	}
		.lg{
			
		}
		
		.sml{
			
		}

		.med{
			
		}
	/*Desktop device*/
	@media(min-width: 992){
		.lg{
			width:31%;
			float:top right;
		}
	}


	/*tablet devices*/
	@media(min-width: 768px) and (max-width: 991px){

	}

	/*mobile devices*/
	@media(max-width: 767){

	}

	



</style>

<h1 id="title" align="center">Our Menu</h1>
<div class="section lg sml med" id="sec1">
<p id="lorem" >Spider Eye Stew</p>
<p class="lorem">				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit quis magna quis dictum. Morbi et euismod est, sit amet placerat nulla. Praesent scelerisque metus eu turpis lacinia tempor. Aenean in vulputate orci. Donec ipsum orci, congue a fringilla at, blandit non eros. Vestibulum ac nunc suscipit, mattis sem ut, auctor erat. Maecenas vestibulum dui tortor, quis ornare odio imperdiet a. Sed nunc lacus, sollicitudin eu nulla maximus, condimentum ullamcorper libero. Donec quis lacus ultrices, accumsan purus sed, ornare arcu. Sed suscipit vulputate iaculis.</p>
</div>
<div class="section lg med sml" id="sec2">
<p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit quis magna quis dictum. Morbi et euismod est, sit amet placerat nulla. Praesent scelerisque metus eu turpis lacinia tempor. Aenean in vulputate orci. Donec ipsum orci, congue a fringilla at, blandit non eros. Vestibulum ac nunc suscipit, mattis sem ut, auctor erat. Maecenas vestibulum dui tortor, quis ornare odio imperdiet a. Sed nunc lacus, sollicitudin eu nulla maximus, condimentum ullamcorper libero. Donec quis lacus ultrices, accumsan purus sed, ornare arcu. Sed suscipit vulputate iaculis.</p>
</div>
<div class="section lg med sml" id="sec3">
<p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit quis magna quis dictum. Morbi et euismod est, sit amet placerat nulla. Praesent scelerisque metus eu turpis lacinia tempor. Aenean in vulputate orci. Donec ipsum orci, congue a fringilla at, blandit non eros. Vestibulum ac nunc suscipit, mattis sem ut, auctor erat. Maecenas vestibulum dui tortor, quis ornare odio imperdiet a. Sed nunc lacus, sollicitudin eu nulla maximus, condimentum ullamcorper libero. Donec quis lacus ultrices, accumsan purus sed, ornare arcu. Sed suscipit vulputate iaculis.</p>
</div>

Answer 1

首先你有几个错误:

1. float:top right 不存在，使用float:right
2. 在媒体查询中写上 992px(你忘记了 px)

这会处理大屏幕。

在平板电脑屏幕上，将 2 个元素的宽度设置为 50%，将第 3 个元素的宽度设置为 100%。在移动设备上，只需将每个元素设置为 100%。

无论如何不要忘记在媒体查询中写上px。