堆栈内存溢出
  繁体   English   中英

将div彼此堆叠

[英]Stack divs ontop of each other

 原文  2016-08-08 11:44:39  8   6    html/ css

问题描述

我目前有一个样式为表格的三列div集。

我希望将这三列垂直堆叠在移动设备上。

我相信使用float方法可以做到这一点，但是每列的标题和描述都出现在单独的行（divs）中，所以我不确定如何实现此目的？

内涵

http://content.screencast.com/users/Workbookssam/folders/Jing/media/cf93215d-90b0-4286-9636-c6b924250358/2016-08-08_1242.png

小提琴 https://jsfiddle.net/8tv35jLL/

的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,&nbsp;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 

.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

见小提琴

我必须为单元格设置显式宽度，以便适当调整它们的大小。 您可以删除行并进行必要的更改以具有相同的样式。
我用了 

width: 250px

解决方案2
 1  2016-08-08 12:24:34

使用弹性框和媒体查询：

  • 使用flexbox在行方向开始布局，请参见第15行。
  • 3列每个元素只能包含几个元素，无需为所有内容都设置div。 使用边距，内边距和边框可见地定义结构。
  • 使用媒体查询触发布局更改。 在此示例中，如果屏幕的宽度为600px或更小，则flexbox属性将变为以列的形式流动，请参见第25行。

在整页模式下查看代码段，并调整大小以使flexbox发挥作用。

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,&nbsp;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

您使用div的方式似乎无法获得您想要的。 这是下面的代码 

 .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>

尝试更改响应式设计的浏览器大小。

解决方案4
 0  2016-08-08 12:05:19

您可以使用CSS媒体查询轻松地做到这一点。 这个想法是针对所有可能没有大屏幕且不支持css3（在您的情况下为垂直堆叠）的设备保留标准设计，而另一种设计是将它们水平堆叠以支持css3的更大屏幕。 许多网站都采用类似的方法。 无论您的用户使用什么设备，都将始终处于安全状态：

它的工作方式如下： 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;
    }

    }

和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

对于此用途，可以使用Bootstrap。 Bootstrap允许您使用行/列布局轻松，动态地设置页面样式。 请访问Bootstrap网站获取更多信息。 您想要的是一种行布局，该布局将自动叠加到移动设备上。 请参阅此小提琴作为示例 

<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

这可能对您来说不是最好的方法，但它会起作用。

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,&nbsp;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 

.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;
    }

您不需要像表一样使div动作。 您可以使用float并排显示它们。 使用最小宽度，您可以确保在达到最小值时它们会互相压住。 我也给出了高度值，因为如果div左移，并且div的高度比中间的div高，那么div在彼此下方时，右侧的div就会卡在中间的div之下。 我不知道我能否表达自己的意思，但希望这一点对您有用：)

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我的div彼此重叠 Bootstrap内联表单堆栈彼此重叠 Divs 相互堆叠 CSS堆栈div彼此叠置 如何将Divs叠加在一起 引导容器彼此浮动 PHP数据库结果彼此堆叠 在 DIV 中将 SVG 相互堆叠 将div彼此堆叠成两行，没有空格 彼此相邻漂浮3个div，并堆叠在较小的屏幕上
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM