Question

我已经在这个网站上工作了很长一段时间，唯一没有想到的就是在手机上查看我的两列合并为一列（桌面和平板电脑看起来最好有两列）。

我的网站位于jordanmiller.newbedesign.com，应该能够以相同的方式查看源代码和css文件，但为了以防万一，我将通过我的CSS代码。我一直在寻找关于这个主题的几个教程，但是当我尝试实现代码时，要么我无法弄清楚如何集成它，要么它似乎没有效果。

我意识到我是新手，所以我确定这是我的代码（对不起，如果它是一团糟），所以我希望我能得到一些见解/建议。提前谢谢！

@charset "UTF-8";
/* CSS Document */

@media screen and (min-width: 47.5em) {
	.leftColumn {
		position: absolute;
		top: 0;
		right: 0;
		width: 18.75em;
	}
	
	.rightColumn {
		margin-right: 19.53em;
	}
	
a {
    color: #418bf0;
    text-decoration: none;
}

nav#navigation {
    position: relative;
	display: inline-block;
	padding-top: 1em; /* 15px */
    float: right;
    padding-right: 1em;
	padding-bottom: 1em;
}

nav#navigation a {
    color: #363b47;
    padding-left: 1em; /* 5px */
    padding-right: 1em; /* 5px */
}

nav#navigation a:hover {
    color: #418bf0;
    text-decoration: none;
}

nav#navigation a.current {
    color: #418bf0;
    text-decoration: none;
}

a.contact {
	padding-left: 3%; /* 10px */
	padding-right: 3%; /* 10px */
}

a#contactleft {
	padding-left: 0%;
	padding-right: 3%; /* 10px */
}

}

html {
	margin: 0;
	margin-top: 5%;
	padding: 0%;
}

body {
    font-family: Helvetica, Tahoma, Verdana, sans-serif;
    color: #464c5c;
    font-size: .875em; /* 14px */
    line-height: 1.25em; /* 20px */
}

.columnsContainer {
	border: 0;
	padding: 1.25em;
	margin-bottom: .5em;
}

.leftColumn {
	position: relative;
	margin: .5em;
}

.rightColumn {
	border: 0;
	padding: 1.25em;
}

a {
    color: #418bf0;
    text-decoration: none;
}

div#logo {
    display: inline-block;
    width: 34%; /* 110px */
    height: 8%; /* 27px */
    position: relative;
	float: left;
    left: 4%;
}

div#wrap {
    width: 100%; /* 726px */
    display: inline-block;
    padding-bottom: 3%; /* 10px */
}

nav#navigation {
    position: relative;
	display: inline-block;
	padding-top: 1em; /* 15px */
    float: right;
    padding-right: 1em;
	padding-bottom: 0;
}

nav#navigation a {
    color: #363b47;
    padding-left: 1em; /* 5px */
    padding-right: 1em; /* 5px */
}

nav#navigation a:hover {
    color: #418bf0;
    text-decoration: none;
}

nav#navigation a.current {
    color: #418bf0;
    text-decoration: none;
}

div#footer {
    position: relative;
    top: 4%; /* 15px */
    text-align: center;
    display: block;
    padding-bottom: 3%; /* 10px */
	clear: both;
}

div.main {
	border: 0;
	padding: 5%; /* 10px */
}

div#profileimg {
	vertical-align: top;
	width: 40%;
	padding-right: 1%;
	Padding-bottom: 3%;
	float: left;
	position: relative;
}

a.contact {
	padding-left: 3%; /* 10px */
	padding-right: 3%; /* 10px */
}

a#contactleft {
	padding-left: 0%;
	padding-right: 3%; /* 10px */
}

div#bio {
	vertical-align: top;
	float: right;
	width: 60%;
	position: relative;
}

Answer 1

你是正确的，但有几件事要纠正。您的媒体查询应显示在样式表 CSS的默认设置之后，而不是在样式表的顶部。这是因为稍后出现的CSS将覆盖先前出现的相同选择器的任何CSS设置;在出现冲突的地方使用最后出现在sylesheet中的CSS。

在你的情况下，靠近CSS的底部你有： .leftColumn { 位置：相对; 保证金：.5em; } 哪个（因为它不在媒体查询中）适用于所有屏幕宽度。因此，这种相对定位将覆盖您在媒体查询中为更高屏幕提供的.leftColum的绝对定位。

还要记住，对于在元素上进行绝对定位，您必须将其父div（或树上方的某些东西）赋予非默认位置（通常是相对位置）。规则是，绝对定位的元素“相对于具有静态位置的第一个父元素”（静态是默认值）。因此，如果您的容器是columnsContainer（您提供的url似乎没有相关的代码 - 如果它显示有问题的实际问题，则只提供一个url！）然后将其设置为position：relative。

此外，您的左列实际上将显示在页面的右侧，因为查询指定了右：0;然后将右列放在左侧。我想你的意思是：

@media screen and (min-width: 47.5em) {
.leftColumn {
    position: absolute;
    top: 0;
    left: 0;
    width: 18.75em;
    }
.rightColumn {
    margin-left: 19.53em;
}

但很高兴看到有人在媒体查询断点中使用em单位，而不是px单位。许多经验丰富的响应式开发人员都不遵循这一点！

移动响应css列，图像和文本合并为一列

1 个答案: