堆棧內存溢出
  簡體   English   中英

將div彼此堆疊

[英]Stack divs ontop of each other

 原文  2016-08-08 11:44:39  5   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