Question

当我将窗口调整为1280 x 720或更低时，我才意识到我得到了一些我不想要的行为。正确的列（.right类）正在下降＆＃34;被击倒＆＃34;下面我调整窗口大小

我的CSS代码（或代码中没有）造成这种情况的原因是什么？我有一种感觉，我在这里错过了一个非常重要的概念。：）

以下是小屏幕上右栏的内容：http://s11.postimg.org/vp9c7o3dv/css.png

这是错误的代码： http://codepen.io/cosmonaut/pen/yyvZjZ?editors=110

＆＃13;

html { 
  background: url(http://s16.postimg.org/k5re12691/bg_radium.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
	width: 95%;
	font-family: courier;
	font-size: 15px;
	color: #E7DFC2;
	margin-left: 30px;
}

.container {
	width: 90%;
	margin: 10px auto;
	background-color: #273E23;
	opacity: 0.97;
	margin-top: 25px;
}

.header {
	text-align:center;
	font-size: 40px;
	padding: 1em;
	border-bottom: 1px solid gray; /* Temporary. */
	background-color: #273E23;
}

.header p {
	font-size: 25px;
	padding: 0px; 
	margin: 0px;
	background-color: #273E23;

}

.header img {
	padding: 0px; 
	margin: 0px;
	width: 200px;
	height: 200px;
}

.menu {
	text-align: center;

}

.menu ul {
}

.menu ul li {
  margin: 0 20px;
  padding: 0;
  list-style-type: none;
  display: inline-block;

}

.menu ul li a {
	text-decoration: none;
	background-color: #273E23;
	color: #D3B474;
}

.left {
	float: left;
	width: 160px;
	margin: 0;
	padding: 1em;
}

.right {
	padding: 1em;
	float: right;
	width: 860px;
	background-color: #273E23;;
}

.right p {
	background-color: #273E23;
}

.footer {
	clear: both;
	margin: 0px;
	padding: .5em;
	text-align: center;
	background-color: #273E23;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
		<link type="text/css" rel="stylesheet" href="stylesheet_v2.css"/>
	<title>Radium Recordings</title>
</head>
<body>
	<div class="container">
		<div class="header">
		<img src="http://s11.postimg.org/z08mz7o9f/radium4.png">
		</div>
		<div class="menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Releases</a></li>
				<li><a href="#">Tours</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
		<div class="left"><p>Hi, I'm the left side. Not sure if I'm even going to keep this column. Lorem Ipsum added: 
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
		</div>
		<div class="right">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
			<p>Aliquam convallis nulla commodo convallis scelerisque. Curabitur elementum porttitor purus, posuere tincidunt turpis sagittis et. Proin non nulla vitae velit rutrum egestas id vitae dolor. Mauris placerat nec metus vel ultrices. Integer molestie lobortis eros a dapibus. Pellentesque commodo iaculis magna fringilla rhoncus. Nullam luctus dui elit, nec ornare erat volutpat vitae. Vestibulum nulla velit, porttitor in hendrerit vel, varius sit amet elit. Aliquam erat volutpat.
			</p>
		</div>
		<div class="footer">
			<p>P.O. Box 321, Anywhere, USA 31721 | Tel: (888) 888-8888</p>
		</div>
	</div>
</body>
</html>

＆＃13;

Answer 1

将列宽更改为百分比。一个例子是this Codepen。

我用过：

.left {
    float: left;
    width: 20%;
    margin: 0;
    padding: 1em;
}
.right {
    padding: 1em;
    float: right;
    width: 67%;
    background-color: #273E23;;
}

但您可以使用任何看起来正确的百分比。

Answer 2

您的网站中有两列。一个具有类名“左”，另一个具有名为“右”的类。现在每个类都有固定的宽度。因此，当屏幕尺寸小于声明的宽度时，第二列会下降以获得它所需的尺寸。

如果我们看到解释：

.right {
   padding: 1em;
   float: right;
   width: 860px;
   background-color: #273E23;
}
.left {
   float: left;
   width: 160px;
   margin: 0;
   padding: 1em;
}

在这里，我们可以看到正确类的宽度为860px，左类的宽度为160px。此外，右类的填充为1em，像素为15。因此，如果要在单行中显示两个元素，则最小屏幕大小应为1050px（860 + 30 + 160）。这里30是两个边填充15px的总和。

如果您想以这样的方式执行代码，那么无论屏幕大小是什么，列都应该保持大小比例，那么应该使用％而不是使用固定宽度。对于击球手的理解，你可以查看@bobdye的例子

Answer 3

在小屏幕上，.container的两列空间不足。

您应在.container中设置px宽度，或为其声明min-width，或在%中声明左右列的宽度。

在我的CS代码中，当屏幕尺寸较小时，我的右列会下拉？

3 个答案: