将div彼此堆叠
[英]Stack divs ontop of each other
问题描述
I currently have a three column set of divs styled as a table. 
我目前有一个样式为表格的三列div集。
I'd like these three columns to stack vertically on a mobile device. 我希望将这三列垂直堆叠在移动设备上。
I believe this maybe possible using the float method, however the titles and description for each column appear in seperate rows (divs) so I'm not sure how to make this happen? 我相信使用float方法可以做到这一点，但是每列的标题和描述都出现在单独的行（divs）中，所以我不确定如何实现此目的？
Intension 内涵
Fiddle https://jsfiddle.net/8tv35jLL/ 小提琴 https://jsfiddle.net/8tv35jLL/
HTML 的HTML
<p><img alt="Service-Desk-Team-heads-mini-min.png" height="212" src="/sites/default/files/pictures/Service-Desk-Team-heads-mini-min.png" title="The 2016 Workbooks Support Team" width="878" /></p>
<h4 style="text-align: left;">Please use the search tool above, the left-side menu or the links below to browse through our Knowledge Base.</h4>
<div class="rTable">
<div class="rTableBody">
<div class="rTableRow">
<div class="rTableCell">
<h4>New to Workbooks?</h4>
</div>
<div class="rTableCell">
<h4>Training videos</h4>
</div>
<div class="rTableCell">
<h4>System Admin</h4>
</div>
</div>
<div class="rTableRow">
<div class="rTableCell" style="border-right: 1px dashed grey;">Using Workbooks for the first time?</div>
<div class="rTableCell" style="border-right: 1px dashed grey;">Watch our short training videos to find out how to use Workbooks:</div>
<div class="rTableCell">System Administrator? Familiarise yourself with the following:</div>
</div>
<div class="rTableRow">
<div class="rTableCell" style="border-right: 1px dashed grey;">
<ul>
<li class="nowrap"><a href="/help/introduction">Introduction to Workbooks</a></li>
<li><a href="/help/navigation_and_editing">Workbooks Desktop</a></li>
<li><a href="/help/importing">Importing Data</a></li>
</ul>
</div>
<div class="rTableCell" style="border-right: 1px dashed grey;">
<ul>
<li class="nowrap"><a href="/help/training/videos#getting_started_with_workbooks_video">Getting started with Workbooks</a></li>
<li class="nowrap"><a href="/help/training/videos#introduction_to_workbooks_outlook_connector_video">Workbooks Outlook Connector</a></li>
<li class="nowrap"><a href="/help/importing">Introduction to Reporting</a></li>
</ul>
</div>
<div class="rTableCell">
<ul>
<li><a href="/help/users/setting_up">Create new Users</a></li>
<li class="nowrap"><a href="/help/own_organisation">Configure your Organisation</a></li>
<li class="nowrap"><a href="/help/customising">Add Custom Fields</a></li>
</ul>
</div>
</div>
</div>
</div>
CSS 的CSS
.rTable {
display: table;
width: 100%;
}
.content-section h4 {
text-align: center;
font-weight: 400;
margin: 0 0 0 0;
}
.content-section img {
margin-bottom: 0;
}
li.nowrap {
white-space: nowrap;
}
.rTableRow {
display: table-row;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
}
.rTableCell, .rTableHead {
display: table-cell;
padding: 3px 10px;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
font-weight: bold;
}
.rTableFoot {
display: table-footer-group;
font-weight: bold;
background-color: #ddd;
}
.rTableBody {
display: table-row-group;
}
6 个解决方案
解决方案1
1 已采纳 2016-08-08 11:59:46
解决方案2
1 2016-08-08 12:24:34
Use flexbox and media queries: 使用弹性框和媒体查询：
- Start layout in a row direction with flexbox see line 15. 使用flexbox在行方向开始布局，请参见第15行。
- The 3 columns can be only a few elements each, no need to have a div for everything. 3列每个元素只能包含几个元素，无需为所有内容都设置div。 Use margins, padding, and borders to define structure visibly. 使用边距，内边距和边框可见地定义结构。
- Use media queries to trigger a change in layout. 使用媒体查询触发布局更改。 In this example, if the screen is 600px or less in width, the flexbox properties change to flow as a column see line 25. 在此示例中，如果屏幕的宽度为600px或更小，则flexbox属性将变为以列的形式流动，请参见第25行。
View the Snippet in Full Page mode and resize to so flexbox in action. 在整页模式下查看代码段，并调整大小以使flexbox发挥作用。
SNIPPET SNIPPET
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> h4 { text-align: center; font-size: 2em; } p { font-size: 16px; margin: 0 10px 15px; } .flex { display: flex; justify-content: space-around; width: 100vw; } section { width: 30%; border-right: 1px dashed black; border-left: 1px dashed black; } @media only screen and (max-width: 600px) { .flex { flex-direction: column; flex-wrap: nowrap; align-items: center; } section { width: 100%; } } </style> </head> <body> <main> <figure class="img"> <img alt="Service-Desk-Team-heads-mini-min.png" height="212" src="http://placehold.it/878x212/ace/001?text=The+2016+Workbooks+Support+Team" title="The 2016 Workbooks Support Team" width="100%" /> </figure> <p>Please use the search tool above, the left-side menu or the links below to browse through our Knowledge Base.</p> <div class='flex'> <section> <h4>Title 1</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p> <ul> <li>Lorem</li> <li>ipsum</li> <li>dolor</li> </ul> </section> <section> <h4>Title 2</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <ul> <li>Lorem</li> <li>ipsum</li> <li>dolor</li> </ul> </section> <section> <h4>Title 3</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <ul> <li>Lorem</li> <li>ipsum</li> <li>dolor</li> </ul> </section> </div> </main> </body> </html>
解决方案3
0 2016-08-08 12:01:39
The way you are using div seems like it won't be possible to get what you want. 您使用div的方式似乎无法获得您想要的。 Here the code below 这是下面的代码
.container{ padding:0; padding:0; } .box{ margin:0; padding:0 .5em 0; width:30%; float:left; } .box h3{ margin:0; padding:0; } .box div{ border-right:2px dotted #ccc; min-height:200px } @media(max-width:598px){ .box{ width:100%; } .box div{ border-bottom:2px dotted #ccc; min-height:0px; } }
<div class="container"> <div class="box"> <h3>New to Workbooks?</h3> <div> <p>Using Workbooks for the first time?</p> </div> </div> <div class="box"> <h3>Training videos</h3> <div> <p>Watch our short training videos to find out how to use Workbooks:</p> </div> </div> <div class="box"> <h3>System Admin</h3> <div> <p> System Administrator? Familiarise yourself with the following:</p></div> </div> </div>
Try changing the browser size for the responsive design. 尝试更改响应式设计的浏览器大小。
解决方案4
0 2016-08-08 12:05:19
You can easily do that with css media queries. 您可以使用CSS媒体查询轻松地做到这一点。 The idea is to keep a standard design for all devices that have a might not have a big screen and not support css3 (the vertical stacking in your case) and another design to stack them horizontally for bigger screens with css3 support. 这个想法是针对所有可能没有大屏幕且不支持css3（在您的情况下为垂直堆叠）的设备保留标准设计，而另一种设计是将它们水平堆叠以支持css3的更大屏幕。 A lot of websites follow a similar approach. 许多网站都采用类似的方法。 No matter what device your users have, you'll always be on the safe side: 无论您的用户使用什么设备，都将始终处于安全状态：
It works like this: CSS 它的工作方式如下： CSS
.container {
width:1200px;
margin: 0px auto;
}
.leftDiv {
background-color:blue;
width: 400px;
height:200px;
}
.rightDiv {
background-color:green;
width: 400px;
height:200px;
}
.centreDiv {
width: 400px;
height:200px;
background-color: yellow;
}
@media only screen and (min-width:883px) {
.leftDiv {
float:left;
}
.centreDiv {
float:left;
}
.rightDiv {
float:right;
}
}
And the html : 和html ：
<div class="container">
<div class="leftDiv" >Left</div>
<div class="centreDiv">Centre</div>
<div class="rightDiv">Right</div></div>
解决方案5
0 2016-08-08 12:07:35
For this use can use Bootstrap. 对于此用途，可以使用Bootstrap。 Bootstrap allows you to easily and dynamically style your page using a row/column layout. Bootstrap允许您使用行/列布局轻松，动态地设置页面样式。 Please see the Bootstrap site for more information. 请访问Bootstrap网站获取更多信息。 What you want here is a row layout that will automatically stack on mobile sizing. 您想要的是一种行布局，该布局将自动叠加到移动设备上。 Please see this fiddle for an example 请参阅此小提琴作为示例
<div class="row">
<div class="col-md-4">
<h2>
New to workbooks?
</h2>
<br />
<p>
Using workbooks for the first time?
</p>
<ul>
<li>link 1</li>
<li>link 3</li>
<li>link 2</li>
</ul>
</div>
<div class="col-md-4">
<h2>
System Admin
</h2>
<br />
<p>
Familiarise yourself
</p>
<ul>
<li>link 1</li>
<li>link 3</li>
<li>link 2</li>
</ul>
</div>
<div class="col-md-4">
<h2>Training videos</h2>
<br />
<p>Watch out short videos</p>
<ul>
<li>link 1</li>
<li>link 3</li>
<li>link 2</li>
</ul>
</div>
</div>
解决方案6
0 2016-08-08 12:18:07
This should work out for you not the best approach maybe but it will work. 这可能对您来说不是最好的方法，但它会起作用。
Html HTML
<p><img alt="Service-Desk-Team-heads-mini-min.png" height="212" src="/sites/default/files/pictures/Service-Desk-Team-heads-mini-min.png" title="The 2016 Workbooks Support Team" width="878" /></p>
<h4 style="text-align: left;">Please use the search tool above, the left-side menu or the links below to
<div class="rTableRow">
<div class="cell">
<h4>New to Workbooks?</h4>
<div style="border-right: 1px dashed grey;">Watch our short training videos to find out how to use Workbooks:</div>
<ul>
<li class="nowrap"><a href="/help/introduction">Introduction to Workbooks</a></li>
<li><a href="/help/navigation_and_editing">Workbooks Desktop</a></li>
<li><a href="/help/importing">Importing Data</a></li>
</ul>
</div>
<div class="cell">
<h4>Training videos</h4>
<div style="border-right: 1px dashed grey;">Using Workbooks for the first time?</div>
<ul>
<li class="nowrap"><a href="/help/training/videos#getting_started_with_workbooks_video">Getting started with Workbooks</a></li>
<li class="nowrap"><a href="/help/training/videos#introduction_to_workbooks_outlook_connector_video">Workbooks Outlook Connector</a></li>
<li class="nowrap"><a href="/help/importing">Introduction to Reporting</a></li>
</ul>
</div>
<div class="cell">
<h4>System Admin</h4>
<div>System Administrator? Familiarise yourself with the following:</div>
<ul>
<li><a href="/help/users/setting_up">Create new Users</a></li>
<li class="nowrap"><a href="/help/own_organisation">Configure your Organisation</a></li>
<li class="nowrap"><a href="/help/customising">Add Custom Fields</a></li>
</ul>
</div>
</div>
Css 的CSS
.rTable {
display: table;
width: 100%;
}
.content-section h4 {
text-align: center;
font-weight: 400;
margin: 0 0 0 0;
}
.content-section img {
margin-bottom: 0;
}
li.nowrap {
white-space: nowrap;
}
.cell {
float:left;
min-width:300px;
width:30%;
padding: 3px 10px;
height:200px;
}
You dont need to make div's act like they are tables. 您不需要像表一样使div动作。 You can use float to show them side by side. 您可以使用float并排显示它们。 And with min width you can make sure they will get under each other when minimum value is reached. 使用最小宽度，您可以确保在达到最小值时它们会互相压住。 I gave height value too because of when divs get under each other if float is left and the div on the left has more height than the div on the middle, the div on the right side will stuck under the middle one. 我也给出了高度值，因为如果div左移，并且div的高度比中间的div高，那么div在彼此下方时，右侧的div就会卡在中间的div之下。 I don't know if i could express myself good but hope this work out for you :) 我不知道我能否表达自己的意思，但希望这一点对您有用：)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.