Question

我希望将主体的右列拆分为两列。目前我只希望底部边框显示为轮廓但无法使其工作。我希望改变#map部分。

我尝试过几种不同的东西，但无法弄清楚，我可能只是错过了一些东西，但我无法弄清楚是什么。

HTML代码：

<!DOCTYPE HTML>
<style>
    * {
        margin: 0;
    }

    html, body {
        height: 100%;
    }

    .mainSect {
        height: 200%;
        background-color: #FEDB00;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 5%;
        opacity: .6;
        position: relative;
        margin-top: -12px;
        border: 2px solid black;
    }

    #news {
        position: absolute;
        width: 70%;
        height: 100%;
        border-right: 2px solid black;
    }

    #map {
        position: absolute;
        width: 20px;
        height: 20px;
        margin-left: 600px;
        border-bottom: 2px solid black;
    }
</style>
<html>
<head>
    <title>Waitemata FC - NEWS </title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="nav">
        <a href="index.html">NEWS </a>
        <a href="index.html">TEAMS
      <ul class="subMenu">
          <li>Juniors</li>
          <li>Youth</li>
          <li>Seniors</li>
      </ul>
        </a>
        <a href="register.html">REGISTRATION </a>
        <a href="gallery.html">GALLERY </a>
        <a href="sponsors.html">SPONSORS </a>
        <a href="about.html">ABOUT </a>
    </div>
    <div class="imgSect">
        <img class="logo" src="img/logo.png" alt="Waitemata AFC Logo" />
        <p class="name">WAITEMATA AFC </p>
    </div>
    <a href="https://www.facebook.com/WaitemataFootballClub/?fref=ts" target="_blank" id="facebookLink">FaceBook Page </a>
    <div class="mainSect">
        <div id="news">
        </div>
        <div class="map">
            <p>test </p>
        </div>
    </div>
    <footer>
    </footer>
</body>
</html>

Answer 1

首先，为了划分主体，你必须有一个容器部分，并在其内部有正确的＆amp;左列，

对于Ex：

<body>
    <div class="container">
        <div class="left-column"></div>
        <div class="right-column">
            <div class="column-header">
            </div>
        </div>
    </div>
</body>
<style type="text/css">
    body {
        width: 100%;
        height: auto;
    }

    .container {
        width: 1200px;
        /*for ex. height:auto;*/
        padding-right: 20px;
        padding-left: 20px;
    }

    .left-column {
        width: 70%;
        /*or in px;*/
        height: auto;
        float: left;
    }

    .right-column {
        width: 30%;
        height: auto;
        float: left;
    }

    .column-header {
        width: 100%;
        height: 50px;
        /*change it as you wish;*/
    }
</style>

如何让右栏的顶部有自己的div？

1 个答案: