在下一页（http://www.ecu.edu/cs-cas/engl/tpc/whytpc.cfm）上，您可以看到，在移动设备上，列会合并为一列。但是，右列中显示的内容会稍微向右移动。媒体查询中的CSS是：
@media only screen and (max-device-width: 480px) {
#content {
float:left;
max-width:50%;
padding:1em 0 1em 0%;
}
#sidebar {
float:left;
max-width:50%;
padding-top:1em;
}
.spacerMain {
display: block;
padding: none;
color: #2a272e;
width: 100%;
}
.column {
display: block;
width: 100%;
float: left;
clear: both;
}
.spacerCol {
display: block;
width: 100%;
padding: none;
color: #2a272e;
clear: both;
float:left;
}
}
和HTML：
<div id="container">
<div id="header">
<div id="navigation">
<ul>
<li><a href="/cs-cas/engl/tpc/index.cfm">Home</a></li>
<li><a href="/cs-cas/engl/tpc/whytpc.cfm">Why TPC?</a></li>
<li><a href="/cs-cas/engl/tpc/tpcprograms.cfm">Programs</a></li>
<li><a href="/cs-cas/engl/tpc/tpcsocial.cfm">TPC Social</a></li>
<li><a href="/cs-cas/engl/tpc/contactus.cfm">Questions?</a></li>
</ul>
</div>
<div id="navigation2">
<ul>
<li><a href="http://www.facebook.com/ecutpc"><img width="45px" height="45px" alt="Facebook" src="/cs-cas/engl/tpc/customcf/facebook.png" /></a></li>
<li><a href="http://www.twitter.com/ecutpc"><img width="45px" height="45px" alt="Twitter" src="/cs-cas/engl/tpc/customcf/twitter.png" /></a></li>
<li><a href="http://www.linkedin.com/pub/brent-henze/b/35a/b34"><img height="45px" alt="Linked In" src="/cs-cas/engl/tpc/customcf/linkedin.png" /></a></li>
<li><a href="http://www.ecu.edu/english"><img width="45px" height="45px" alt="Purple Bard" src="/cs-cas/engl/tpc/customcf/bardicon.png" /></a></li>
</ul>
</div>
</div>
<div id="content">
<div id="main">
<div id="spacerMain">
<div class="column">
<div class="spacerColFirst">
<h3 class="sectionTitle">Why TPC at ECU?</h3>
The ECU Department of English offers two innovative online graduate programs in technical and professional communication: the <a href="http://www.ecu.edu/cs-cas/engl/graduate/degreesoptions.cfm#CP_JUMP_96324"><span style="color: rgb(4, 46, 238); ">Certificate in Professional Communication</span></a> and the <a href="http://www.ecu.edu/cs-cas/engl/graduate/degreesoptions.cfm#CP_JUMP_96211">MA concentration in TPC</a>.</div>
<div class="spacerColFirst"><br />
</div>
<div class="spacerColFirst">Every profession needs excellent communicators, and communication itself is becoming an increasingly complex skill set that combines strong writing and editing skills, teamwork, technological sophistication, leadership, adaptability, global awareness, and disciplinary knowledge.<br />
<br />
As part of our master's degree program, you will gain broad proficiency in all these essential areas. In consultation with your faculty advisor and other mentors, you can also focus on one or more areas of emphasis, including </div>
<div class="spacerColFirst">
<ul>
<li><span style="line-height: 1.3em;"><font size="2">technical editing and publishing</font></span></li>
<li><span style="line-height: 1.3em;"><font size="2">emerging media and communication technologies</font></span></li>
<li><span style="line-height: 1.3em;"><font size="2">teaching and training; and </font></span></li>
<li><span style="line-height: 1.3em;"><font size="2">public and civic communication in contexts such as healthcare, science, government, or service organizations.</font></span></li>
</ul>
As a certificate student, you can broaden your communication proficiency by sampling across the range of our courses or develop advanced skills in a specific area of interest.<br />
<br />
As members of a large and dynamic English department, MA students are also encouraged to take advantage of the full range of courses offered in other areas of English, including rhetoric and composition, linguistics and TESL, film, folklore, literature, creative writing, and multicultural and transnational studies.</div>
</div>
</div>
<div class="column">
<div class="spacerCol">
<h3 class="sectionTitle">TPC and your Career Goals</h3>
Our programs offer practicing communication professionals the opportunity to step back from their everyday tasks to reconsider the technological changes and communication principles that shape their work environments.<br />
<br />
Our courses combine cutting-edge theories and contemporary professional practices. Many courses use a project approach, helping students to develop sophisticated workplace communication products while they learn fundamental principles of professional communication in contemporary workplaces.<br />
<br />
Our graduates become public information officers, fund raising and educational outreach professionals, program directors and communication specialists, trainers, content developers, technical editors, and technical communicators in high-tech industries. Others become educators at community colleges or four-year colleges and universities.<br />
<br />
If your career goals include effective communication, our programs can help.</div>
</div>
</div>
</div>
<div id="sidebar">
<dl>
<dt>Program Links</dt>
<dd><a href="http://www.ecu.edu/cs-cas/engl/graduate/degreesoptions.cfm#CP_JUMP_96211">MA Degree (TPC Concentration)</a></dd>
<dd><br />
</dd>
<dd><a href="http://www.ecu.edu/cs-cas/engl/graduate/degreesoptions.cfm#CP_JUMP_96324">Graduate Certificate in TPC</a></dd>
<dd><br />
</dd>
<dd><a href="/cs-cas/engl/tpc/tpcadvising.cfm">Course Advising and Registration</a></dd>
<dd><br />
</dd>
<dd><a href="http://www.ecu.edu/cs-acad/gradschool/results.cfm?id=8">English Graduate Program</a></dd>
<dd><br />
</dd>
<dd><a href="http://www.ecu.edu/cs-acad/grcat/programENGL.cfm">English Graduate Catalog</a></dd>
<dd><br />
</dd>
<dd><a href="http://www.ecu.edu/cs-acad/grcat/coursesENGL.cfm">English Graduate Curricula</a><br />
<br />
</dd>
</dl>
<dl>
<dt>Links for Students</dt>
<dd><a href="http://www.ecu.edu/cs-cas/engl/">ECU Department of English</a><br />
<br />
<a href="http://www.ecu.edu/gradschool/">The Graduate School at ECU</a><br />
<br />
<a href="http://www.ecu.edu/fsonline/senate/fscalend.cfm">ECU Academic Calendars</a><br />
<br />
<a href="http://blackboard.ecu.edu">Blackboard Student Access</a><br />
<br />
<a href="http://mymail.ecu.edu">Student E-Mail Access</a><br />
<br />
<a href="https://pirateport.ecu.edu/portal/">Pirate Port</a><br />
</dd>
</dl>
<dl>
<dt><a href="http://www.twitter.com/ecutpc">@ECUTPC</a></dt>
<dd>
<ul id="twitter_update_list">
<li style="list-style: none">%nbsp</li>
<li class="twitter_date">%nbsp</li>
</ul>
</dd>
</dl>
</div>
<div id="footer"> </div>
</div>
答案 0 :(得分：0)
它没有移动，侧边栏只占宽度的50％。
但是，在侧边栏内，“dl”元素的边距为1em;这是你看到的空间，使它看起来像“转移”。
无论如何，如果你想要获得这个保证金，你应该给左栏提供一些保证金，否则他们将“触及”
答案 1 :(得分：0)
我在CSS中使用margin-left: -2m;来修复文本列问题。这似乎已经在移动浏览器上清除了它。