Question

我左边有一个菜单，那里有一个标题。然后我在右边有一个黑盒子，它应该填满右侧的所有剩余空间，但问题是黑盒子没有浮动到菜单旁边，它会在菜单下面漂浮。如果有人可以帮我解决这个问题，我将不胜感激。

CSS：

body {
    background-color: #ececec;
    font-family: calibri;
    font-size: 13px;
    margin: 0;
    padding: 0
 }
.header {
    min-height: 54px;
    background-color: #4d7496;
    font-size: 15px;
    border-radius: 0;
    margin: 0;
    padding-right: 20px;
    border-bottom: 4px solid #2a4053;
}
.sidebar {
    width: 240px;
    background-color: #f9f9f9;
    position: absolute;
    top: 58px;
    left: 0;
    min-height: 100%;
    z-index: 10;
    border-right: 1px solid #d1d1d1;
}

.sidebar  .left_menu {
    width: 180px;
    padding: 15px 30px;
    float: left;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ebebeb;
    color: #555555;
    text-decoration: none;
}

.sidebar  .left_menu:hover {
    width: 177px;
    background-color: #fdfdfd;
    border-right: 3px solid #668eb0;
    cursor: pointer;
}

.header_menu {
    height: 14px;
    padding: 20px;
    color: #ffffff;
    margin-right: -1px;
    border-right: 1px solid #3d5c78;
    border-left: 1px solid #3d5c78;
    border-bottom: 4px solid #2a4053;
    float: right;
}

.header_menu:hover {
    background-color: #557a9a;
    cursor: pointer;
}
.content {
    width: 100%;
    min-height: 100%;
    background-color: #000;
    color: #fff;
    padding: 20px;
    margin: 20px 0 20px 20px;
    float: left;
    border: 1px solid #000;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    text-align: center
 }

    .content h2.title {
        font-size: 21px;
        color: #efefef;
        text-align: left;
        margin-top: -5px;
        border-bottom: 1px solid
     }

.signin h2.title {
    font-size: 21px;
    color: #efefef;
    text-align: left;
    margin-top: 10px;
    border-bottom: 1px solid
 }

HTML：

<body>
<div class="header">
    <img src="theme/default/images/logo.png" style="padding: 10px;"/>
    <a href="logout.php"><div class="header_menu"><img src="theme/default/images/lock.png" style="margin-right: 10px;" /> Logout</div></a>
    <a href="edit_acc.php"><div class="header_menu"><img src="theme/default/images/user.png" style="margin-right: 10px;" />Edit Account</div></a>
</div>
<div class="sidebar">
    <a href="index.php"><div class="left_menu"><img src="theme/default/images/home.png" style="margin-right: 10px;" />Dashboard</div></a>
    <a href="bank.php"><div class="left_menu"><img src="theme/default/images/coin.png" style="margin-right: 10px;" />Add Funds</div></a>
    <a href="bank.php?withdraw"><div class="left_menu"><img src="theme/default/images/withdraw.png" style="margin-right: 10px;" />Withdraw Funds</div></a>
    <a href="order.php"><div class="left_menu"><img src="theme/default/images/cart.png" style="margin-right: 10px;" />Place Order</div></a>
    <a href="orders.php"><div class="left_menu"><img src="theme/default/images/order.png" style="margin-right: 10px;" />My Order</div></a>
    <a href="change.php"><div class="left_menu"><img src="theme/default/images/star.png" style="margin-right: 10px;" />Change Membership</div></a>
</div>
<div class="content">
    <h2 class="title">Add Funds</h2>
</div>

Answer 1

你的问题是，你

将菜单置于绝对位置，将其从＆＃34;正常流程＆＃34;
另外将内容div设置为width: 100%
浮动内容div

因此，解决方案是避免上述所有内容，只需将内容元素赋予菜单宽度的左边距（在您的情况下为240px）。那就是......！

这是您更新的JSFiddle。

Answer 2

基本上，如果你想要一个浮动元素旁边的元素来使用所有剩余的空间，它不应该浮动，它将通过defaut使用所有宽度avalaible作为block元素。

要保持旁边而不是包裹belo或躺在浮动元素下，你需要触发它的布局。

overflow:hidden;，在这种情况下将完成这项工作。 .content会介意浮动元素在它内部和外部。不要给它任何width或height，没有必要。最终可以使用min-height。的 DEMO

.content { overflow:hidden; min-height: 100%;/* this works if parent has an height set */ background-color: #000; color: #fff; padding: 20px; margin: 20px 0 20px 20px; border: 1px solid #000; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; text-align: center }

在.content内，图片可以或应该设置为max-width:100%。

此外，绝对定位来自流程，因此页面的其他元素看不到。保持侧杆在流动中漂浮。的 DEMO

.sidebar { width: 240px; background-color: #f9f9f9; /* Useless without positionning top: 58px; left: 0; min-height: 100%; z-index: 10;*/ border-right: 1px solid #d1d1d1; float: left;/* make it float in the flow*/ } .sidebar .left_menu { width: 180px; padding: 15px 30px; background-color: #f9f9f9; border-bottom: 1px solid #ebebeb; color: #555555; text-decoration: none; }

Box浮动在菜单下而不是旁边

2 个答案: