并排定位元素

时间：2017-12-19 23:57:02

标签： html css position

  1. 在我的主页面上，我放入的桌子并没有“并排”，因为我把窗口缩小了。我尝试过使用不同尺寸的表，不同尺寸的表，使用内联/块等等。我做错了什么？

  2. 好像这个页面工作了一段时间，然后在IE 10/11中停止工作一段时间。我做错了什么？

    3. 我是初学者;也欢迎一般提示/批评。这是我的代码：

    ＆＃13;
    ＆＃13; 
      /* Home page styling */

* {
  box-sizing: border-box;
}

body {
  background-color: #c9d5e8;
  margin: 0;
}

.header {
  color: #2c2f35;
  font-family: arial;
  font-weight: bold;
  font-variant: small-caps;
  text-align: center;
  letter-spacing: 5px;
}

.header a {
  text-decoration: none;
}

.header a:visited {
  color: #2c2f35;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  /* No bullet points */
  overflow: hidden;
  /* Overflow clipped to fit area */
  background-color: #333;
  width: 100%;
}

#workflow {
  background-color: #a0341e;
  font-style: oblique;
}

#contacts {
  float: right;
  background-color: #4CAF50;
}

li {
  float: left;
  border-right: 1px solid #bbb;
}

li: last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}


/* Create three unequal columns that floats next to each other */

.column {
  float: left;
  padding: 10px;
}


/* Left and right column */

.column.side {
  width: 30%;
}

.column.side p {
  font-size: 0.8em;
}


/* Middle column */

.column.middle {
  text-align: justify;
  font-family: arial, sans-serif;
  font-size: 1em;
  width: 40%;
}

.column.middle p {
  padding: 1% 1%;
  border-left: 8px solid #43548E;
  background-color: #dddddd;
}

.column.side table {
  margin: 0%;
  padding: 0%;
  display: inline-table;
  float: left;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

.column.side.ql p {
  border: 1px solid #6B688E;
  padding: 1% 1%;
  margin: 0% 10%;
  text-align: center;
  font-size: 0.9em;
  background-color: #dddddd
}

#swbrd {
  text-align: left;
  background: #898E5E padding: 5px;
  padding-left: 5px;
  border-left: solid 8px;
  border-color: #43548E;
}

caption {
  font-size: 0.8em;
  font-weight: bold;
}

td,
th {
  border: 1px solid #dddddd;
  margin: 0 0 0 0;
  text-align: left;
  padding: 0px;
  font-size: 0.8em;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

iframe {
  display: block;
  width: 100%;
}

h3 {
  text-align: center;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

footer {
  text-align: center;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other*/

@media (max-width: 600px) {
  .column.side,
  .column.middle {
    width: 100%;
  }
    ＆＃13; 
    <html>

<head>
  <title>SLMC Intranet</title>
  <link rel="stylesheet" href="style1.css">
  <meta charset="utf-8">
  <meta name="author" content="Jonathan Fang">
  <meta name="description" content="Home page for Star Lane Medical Centre intranet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="header">
    <h1><a href="./index.html">SLMC intranet</a></h1>
  </div>

  <nav>
    <ul>
      <li><a href="./pages/doctorclinics.html"> Clinics </a></li> 
      <li><a href="./pages/locums.html"> Locums </a></li>
      <li id="workflow"><a href="#"> Workflow </a></li>
      <li><a href="./pages/documents.html"> Documents </a></li>
      <li><a href="./pages/policies.html"> Policies </a></li>
      <li><a href="./pages/elearning.html"> E-Learning </a></li>
      <li id="contacts"><a href="./pages/contacts.html">Contacts</a></li>
    </ul>
  </nav>

  <main>
    <div class="row">
      <div class="column side">
        <h3 id="swbrd"><span id="span">Switchboard</span></h3>
        <table>
          <caption>Consulting Rooms:</caption>
          <tr>
            <th>Room</th>
            <th>Name</th>
            <th>Ext</th>
          </tr>
          <tr>
            <td>2</td>
            <td>Clinical Room</td>
            <td>5222</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Jerry Gomes</td>
            <td>5301</td>
          </tr>
          <tr>
            <td>4</td>
            <td>Dr Chiu</td>
            <td>5304</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Clinical Room</td>
            <td>5305</td>
          </tr>
          <tr>
            <td>6</td>
            <td>Dr Pang</td>
            <td>5366</td>
          </tr>
          <tr>
            <td>7</td>
            <td>Dr Edung</td>
            <td>5307</td>
          </tr>
          <tr>
            <td>8</td>
            <td>Dr Fang</td>
            <td>5308</td>
          </tr>
          <tr>
            <td>9</td>
            <td>Dr Smith</td>
            <td>5309</td>
          </tr>
          <tr>
            <td>10</td>
            <td>Dr Ekundayo</td>
            <td>5302</td>
          </tr>
          <tr>
            <td>11</td>
            <td>Dr Lad</td>
            <td>5303</td>
          </tr>
          <tr>
            <td>12</td>
            <td>Clinical Room</td>
            <td>5312</td>
          </tr>
          <tr>
            <td>13</td>
            <td>Kay-Deen</td>
            <td>5313</td>
          </tr>
        </table>
        <table>
          <caption>1st Floor:</caption>
          <tr>
            <th>Room</th>
            <th>Name</th>
            <th>Ext</th>
          </tr>
          <tr>
            <td>16</td>
            <td>Clinical Room</td>
            <td>5216</td>
          </tr>
          <tr>
            <td>17</td>
            <td>Clinical Room</td>
            <td>5217</td>
          </tr>
          <tr>
            <td>18</td>
            <td>Clinical Room</td>
            <td>5218</td>
          </tr>
          <tr>
            <td>19</td>
            <td>Clinical Room</td>
            <td>5219</td>
          </tr>
          <tr>
            <td>20</td>
            <td>Clinical Room</td>
            <td>5220</td>
          </tr>
          <tr>
            <td>25</td>
            <td>Doctors room</td>
            <td>5221</td>
          </tr>
          <tr>
            <td>-</td>
            <td>Reception</td>
            <td>5200</td>
        </table>
        <table>
          <caption>Reception:</caption>
          <tr>
            <th>Line</th>
            <th>Ext</th>
          </tr>
          <tr>
            <td>Doctors & AUA only</td>
            <td>5000</td>
          </tr>
          <tr>
            <td>Ramila 5322</td>
            <td>5322</td>
          </tr>
          <tr>
            <td>Work Station 1</td>
            <td>5002</td>
          </tr>
          <tr>
            <td>Work Station 2</td>
            <td>5003</td>
          </tr>
          <tr>
            <td>Work Station 3</td>
            <td>5005</td>
          </tr>
          <tr>
            <td>Work Station 4</td>
            <td>5007</td>
          </tr>
        </table>
        <table>
          <caption>Reception:</caption>
          <tr>
            <th>Line</th>
            <th>Ext</th>
          </tr>
          <tr>
            <td>Doctors & AUA only</td>
            <td>5000</td>
          </tr>
          <tr>
            <td>Ramila 5322</td>
            <td>5322</td>
          </tr>
          <tr>
            <td>Work Station 1</td>
            <td>5002</td>
          </tr>
          <tr>
            <td>Work Station 2</td>
            <td>5003</td>
          </tr>
          <tr>
            <td>Work Station 3</td>
            <td>5005</td>
          </tr>
          <tr>
            <td>Work Station 4</td>
            <td>5007</td>
          </tr>
        </table>
        <table>
          <caption>Reception:</caption>
          <tr>
            <th>Line</th>
            <th>Ext</th>
          </tr>
          <tr>
            <td>Doctors & AUA only</td>
            <td>5000</td>
          </tr>
          <tr>
            <td>Ramila 5322</td>
            <td>5322</td>
          </tr>
          <tr>
            <td>Work Station 1</td>
            <td>5002</td>
          </tr>
          <tr>
            <td>Work Station 2</td>
            <td>5003</td>
          </tr>
          <tr>
            <td>Work Station 3</td>
            <td>5005</td>
          </tr>
          <tr>
            <td>Work Station 4</td>
            <td>5007</td>
          </tr>
        </table>
      </div>
      <div class="column middle">
        <p>Welcome to the staff homepage. Essential information that you may need during your stay at Star Lane Medical Centre may be found on this site. This intranet will be your first point of resource and is intendeded for employees only.</p>
        <h3>Surgery Calander</h3>
        <iframe src="https://calendar.google.com/calendar/embed?src=jonafandango%40gmail.com&ctz=Europe/London" style="border: 3px" width="600" height="600" frameborder="0" scrolling="no"></iframe>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget
          luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
      </div>
      <div class="column side ql">
        <h3>Quick Links</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
      </div>
    </div>
  </main>

  <footer>@2017</footer>
</body>

</html>
    ＆＃13;
    ＆＃13;
    ＆＃13;

1 个答案:

答案 0 :(得分：0)

我建议使用几种开源资源。 一个是Twitter在GetBootstrap.com上的Bootstrap

它非常容易学习，并为您解决了很多CSS问题。

您所做的就是将bootrap.css和bootstrap.js本地添加到您的项目中，或者作为其在互联网上的位置的链接，查看他们的“入门”部分。然后查看他们的“示例”，你会看到GRIDS的行为与你在你的部分中描述的一样，而且它很漂亮。

在将Bootstrap安装到项目主页或部分之后，这就是在缩小窗口时不会堆叠的网格的方法。

<div class="container">
  <div class="row">
    <div class="col-sm">
      <table>
table here
</table>
    </div>
   <div class="col-sm">
      <table>
another table here
</table>

    </div>
    <div class="col-sm">
      <table>
third table here.
</table>

    </div>
  </div>
</div>

然后查看主题，如果你想让事情看起来非常精致和专业。

查看COMPONENTS区域，开始使用一些非常漂亮的对象，预先为你构建。

第二个资源在https://datatables.net/被称为DataTables这是另一个漂亮的数据布局开源工具，它真正将您带到了一个新的水平，并且非常易于使用。

BootStrap和DataTables都依赖于安装JQuery。如果您使用的是Visual Studio，则可以使用NuGet包管理器安装所有这三个。

希望这有帮助！

相关问题
最新问题