Question

我目前有一组三列div作为表格。

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

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

内涵

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

Answer 1

见fiddle

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

width: 250px

Answer 2

使用flexbox和媒体查询：

使用flexbox以行方向开始布局，请参阅第15行。
3列只能是几个元素，不需要为所有东西都有div。使用边距，填充和边框可明确定义结构。
使用媒体查询触发布局更改。在此示例中，如果屏幕宽度为600px或更小，则flexbox属性将更改为列，请参见第25行。

以完整页面模式查看代码段，然后调整大小以便运行中的Flexbox。

段

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 4

您可以使用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>

Answer 5

对于此用途，可以使用Bootstrap。 Bootstrap允许您使用行/列布局轻松动态地设置页面样式。有关详细信息，请参阅Bootstrap site。你想要的是一个行布局，它将自动堆叠在移动大小上。有关示例，请参阅this fiddle

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

Answer 6

这应该对你有用，不是最好的方法，但它会起作用。

<强> 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之下。我不知道我是否可以表达自己的意见，但希望这项工作对你有用：）

堆叠在彼此的顶部

6 个答案:

段