我有一个包含3列的网页，只在全尺寸屏幕上看起来不错。我即将撰写一些主要更新，以使我的网站对移动设备友好。我的网站的其余部分我没有关于更新的疑虑，升级将是直接的，但我不知道我将如何解决我的3列表格布局。为了使其移动，我将不得不采取三列并将内容移动到一个单一的列。
要实现这一点，它可以纯粹通过html＆amp; amp; CSS？或者它是否涉及javascript？在javascript中执行它会很好但是如果有一种方法可以在CSS中执行它我宁愿从那里开始。
<table id="resource_manager">
<tr> <!--Row #1-->
<td colspan="3">
<h1 class="center_text">Notable Ministries</h1>
<br>
</td>
</tr>
<tr> <!--Row #2-->
<td colspan="2" class="center_text">
<p style="text-align: left">
My purpose for putting this together is mainly because friends ask me where they can get more information on something, it's always nice to be able
to point someone in the right direction to get answers.
<br><br>
All resources here should be publicly accessible, mostly via youtube or directly from the persons web page. Please notify me if any links are broken.
<br><br>
<h2 style="text-align: left">Ephesians 4:11-16</h2>
<p style="text-align: left">
And He Himself gave some to be apostles, some prophets, some evangelists, and some pastors and teachers, for the equipping of the saints for
the work of ministry, for the edifying of the body of Christ, till we all come to the unity of the faith and of the knowledge of the Son of God, to
a perfect man, to the measure of the stature of the fullness of Christ; that we should no longer be children, tossed to and fro and carried about
with every wind of doctrine, by the trickery of men, in the cunning craftiness of deceitful plotting, but, speaking the truth in love, may grow up
in all things into Him who is the head—Christ— from whom the whole body, joined and knit together by what every joint supplies, according to the
effective working by which every part does its share, causes growth of the body for the edifying of itself in love.
</p>
</p>
<br>
</td>
</tr>
<tr class="resource_row_image"> <!--Row #3-->
<td class="cell_size"> <!--Cell 1 Keith Moore-->
<a href="http://www.moorelife.org/freedownloads-serieslist.php?" target="_blank">
<img src="img/resources/keith_moore.jpg" alt="keith moore" class="resource_image">
</a>
</td>
<td class="cell_size"> <!--Cell 2 Kenneth Hagin-->
<a href="https://www.youtube.com/playlist?list=PLIXcY2izjpDgROo3MRlAU2MJSyjthXLLc" target="_blank">
<img src="img/resources/kenneth_hagin.jpg" alt="kenneth hagin" class="resource_image">
</a>
</td>
<td class="cell_size"> <!--Cell 3 Bill Johnson-->
<a href="https://www.youtube.com/playlist?list=PLEtP4XPKdli585uNfIU8WNRYawCusmEYK" target="_blank">
<img src="img/resources/bill_johnson.jpg" alt="bill johnson" class="resource_image">
</a>
</td>
</tr>
<tr class="resource_row_text"> <!--Row #4-->
<td class="cell_size"> <!--Cell 1 Keith Moore-->
<h2>Keith Moore</h2>
Teacher/Pastor, I reffer to Keith as my "bible college experience," he has 30+ years
of free audio and video available on any and every subject.
</td>
<td class="cell_size"> <!--Cell 2 Kenneth Hagin-->
<h2>Kenneth Hagin</h2>
Prophet, with nearly 70 years of ministry under his belt, Hagin most commonly preached on the subject of faith in Gods word.
</td>
<td class="cell_size"> <!--Cell 3 Bill Johnson-->
<h2>Bill Johnson</h2>
Apostle/Pastor, Bill pastors a church in Redding California named Bethel Church, the church is most known for miracles, signs and wonders.
</td>
</tr>
答案 0 :(得分：2)
Bootstrap（getbootstrap.com - 我的个人偏好）或Foundation（foundation.zurb.com）等框架将为您解决所有这些问题。
如果您不想使用外部框架，可以在CSS文件中使用@media查询，如下所示：
//First Activity
Intent intent=new Intent(getApplicationContext(),secondActivity.class);
intent.putExtra("cred",cred);
startActivityForResult(intent,RESULT_CODE);
//second Activity
Intent i=getIntent();
cred=i.getIntExtra("cred",10);
//....Update your values
Intent sendBack=new Intent();
sendBack.putExtra("cred",cred);
setResult(RESULT_CODE,sendBack);
//First Activity
@Override
protected void onActivityResult(int reqCode, int resCode, Intent data)
{
if(resCode==RESULT_CODE)
cred=data.getIntExtra("cred",10);
}
//RESULT_CODE is a integer to be kept constant for a type of result.
这样，您可以准确指定它在特定屏幕尺寸上的外观。以下是更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
答案 1 :(得分：2)
HTML：
<div class="flex-container">
<div class="flex-item">COL 1</div>
<div class="flex-item">COL 2</div>
<div class="flex-item">COL 3</div>
</div>
CSS：
*{
margin: 0;
padding: 0;
}
.flex-container{
display: flex;
flex: row nowrap;
height: 100vh;
}
.flex-item{
border: 1px solid black;
background-color: blue;
width: 100%;
}
正如您所看到的，为了创建此布局，需要很少的HTML和CSS。如果您想在手机上查看时更改3列布局，可以使用Media Queries。
答案 2 :(得分：0)
这些天的首选方式是使用Twitter的Bootstrap3＆＃39;框架。它有一个响应的网格布局系统。
以下是您在bootstrap中完成的代码：
https://jsfiddle.net/f9prc0ad/
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h2>
Notable Ministries
</h2>
<p>
My purpose for putting this together is mainly because friends ask me where they can get more information on something, it's always nice to be able
to point someone in the right direction to get answers.
</p>
<p>
All resources here should be publicly accessible, mostly via youtube or directly from the persons web page. Please notify me if any links are broken.
</p>
</div>
</div>
</div>
<div class="row hidden-sm hidden-xs">
<div class="col-md-12">
<blockquote>
<p>
And He Himself gave some to be apostles, some prophets, some evangelists, and some pastors and teachers, for the equipping of the saints for
the work of ministry, for the edifying of the body of Christ, till we all come to the unity of the faith and of the knowledge of the Son of God, to
a perfect man, to the measure of the stature of the fullness of Christ; that we should no longer be children, tossed to and fro and carried about
with every wind of doctrine, by the trickery of men, in the cunning craftiness of deceitful plotting, but, speaking the truth in love, may grow up
in all things into Him who is the head—Christ— from whom the whole body, joined and knit together by what every joint supplies, according to the
effective working by which every part does its share, causes growth of the body for the edifying of itself in love.
</p> <small>Ephesians <cite>4:11-16</cite></small>
</blockquote>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="media">
<a href="http://www.moorelife.org/freedownloads-serieslist.php?" class="pull-left"><img alt="Bootstrap Media Preview" src="http://www.godpreach.com/wp-content/uploads/2013/04/keith-moore.jpg" class="media-object" width="200px" /></a>
<div class="media-body">
<h4 class="media-heading">
Keith Moore
</h4> Teacher/Pastor, I reffer to Keith as my "bible college experience," he has 30+ years
of free audio and video available on any and every subject.
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<a href="https://www.youtube.com/playlist?list=PLIXcY2izjpDgROo3MRlAU2MJSyjthXLLc" class="pull-left"><img alt="Bootstrap Media Preview" src="http://www.harrisonhouse.com/client/client_images/authors/1110large.jpg" class="media-object" width="200px"/></a>
<div class="media-body">
<h4 class="media-heading">
Kenneth Hagin
</h4> Prophet, with nearly 70 years of ministry under his belt, Hagin most commonly preached on the subject of faith in Gods word.
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<a href="https://www.youtube.com/playlist?list=PLEtP4XPKdli585uNfIU8WNRYawCusmEYK" class="pull-left"><img alt="Bootstrap Media Preview" src="http://www.hisevents.com/assets/images/content/cache/d6c1d9cbd289fb0a70bb3c6aeb1b6c93de057ef1.jpg" class="media-object" width="200px" /></a>
<div class="media-body">
<h4 class="media-heading">
Bill Johnson
</h4> Apostle/Pastor, Bill pastors a church in Redding California named Bethel Church, the church is most known for miracles, signs and wonders.
</div>
</div>
</div>
</div>
</div>
注意当屏幕尺寸很小时它在列中的全部内容，当你缩小以提供更大的屏幕尺寸时，你会看到它变为3列。