除

Question

我在Stackoverflow上看到了类似的问题，我尝试了他们的指示，但它仍然没有区别。我已经完成了保证金：0填充：我的代码也是0。

第一个div是侧栏，第二个div是内容（蓝色），右侧有空白区域。右边的空间不是第三个div，它似乎只是白色空间。我不希望白色空间在那里。

这是我的CSS / HTML：

   #dashboard {
       width: 100%;
   }
   
   #content {
       float: right;
       width: 80%;
       overflow: hidden;
       background: aqua;
   }
   
   #sidebar {
       font-family: "Open Sans";
       font-size: 16px;
       font-style: normal;
       font-variant: normal;
       font-weight: bolder;
       line-height: 18px;
       color: #c5cdd1;
       text-decoration: none;
       background-color: #14253f;
       width: 220px;
       height: 100%;
       float: left;
       width: 20%;
       overflow: hidden;
   }

<section id="dashboard">
    <div id="sidebar">
        <!-- Logo -->
        <div id="logo"><img src="img/FDMxLogo.png" /></div>

        <!-- Nav -->
        <nav id="nav">
            <a class="mob-nav"> </a>
            <ul>
                <li id="m-item" class="current">
                    <a href="#"><img src="img/ico_home.png" />DASHBOARD</a>
                </li>
                <li id="m-item">
                    <a href=""><img src="img/ico_report.png" />REPORTS</a>
                </li>
                <li id="m-item">
                    <a href=""><img src="img/ico_cust.png" />CUSTOMIZE</a>
                </li>
                <li id="m-item">
                    <a href=""><img src="img/ico_set.png" />SETTINGS</a>
                </li>
                <li id="m-item">
                    <a href=""><img src="img/ico_about" />ABOUT</a>
                </li>
                <li id="m-item">
                    <a href=""><img src="img/ico_con" />CONTACT</a>
                </li>

            </ul>
        </nav>
    </div>
    <div id="content">
        <a href="create.php" class="add">Add Graph<br></a>
        <br>
        <br>
        <br>
        <?php echo $div;?>

            <button style="margin-top:0em;width:100%; " type="submit" onClick="remove();">REMOVE</button>
    </div>
</section>

Answer 1

这是一个你可以尝试的简单编辑。

我添加了

display:table;

到#dashboard。 我从＃content和#sidebar中删除了float。我也从两者中删除了宽度百分比，但是保留了宽度：220px。在侧栏。

然后我添加了

display:table-cell;

同时加入#content和#sidebar。

小提琴：https://jsfiddle.net/r5jcv2yu/

Answer 2

#content的80％宽度让我觉得搞乱了。您还在#sidebar上使用了两次宽度