集裝箱全寬

首先爲標題沒有真正明確集裝箱全寬

對不起，這裏是我的問題：我已經容器，它裏面一個側邊欄是280像素，我想使主頁全寬度。但是，如果我寫這樣的東西

.container { 
    width: 100%; 

    .sidebar { 
    width: 280px; 
    } 

    .home { 
    width: 100%; 
    } 
}

主頁在底下，我想把側邊欄放在一邊。但我不知道該怎麼做

來源

2017-08-15 Mavrick RMX'

你的意思是make '家'div佔據了剩餘的空間？目前還不清楚你在問什麼。 –

可能的重複 - https://stackoverflow.com/questions/1260122/expand-a-iv-to-take-the-remaining-width –

您能否提供一個工作片段？ –

下面是使用0 CSS溶液到minus的.sidebar width從.home

#container { 
 
    width: 100%; 
 
    height: 300px; 
 
} 
 

 
#container .sidebar { 
 
    width: 280px; 
 
    height: 100%; 
 
    background: blue; 
 
    display: inline-block; 
 
    color:#fff; 
 
} 
 

 
#container .home { 
 
    width: calc(100% - 285px); 
 
    height: 100%; 
 
    background: yellow; 
 
    display: inline-block; 
 
}

<div id="container"> 
 
    <div class="sidebar">SideBar</div> 
 
    <div class="home">Home</div> 
 
</div>

來源

2017-08-15 12:08:34 frnt

太棒了！它的效果很好。謝謝你 –

歡迎@MavrickRMX':-) – frnt

下面創建一個側邊欄與280像素的固定寬度和DIV（。家裏）與流體寬度：

SCSS

.container { 
    width: 100%; 
    overflow:hidden; 

    .sidebar { 
    float:right; /* or float:left for left sidebar */ 
    width:280px; 
    } 

    .home { 
    margin-right:280px; /* or margin-left for left sidebar */ 
    } 
}

HTML

<div class="container"> 
    <div class="sidebar"> 

    </div> 
    <div class="home"> 

    </div> 
</div>

來源

2017-08-15 12:05:23 kinggs

而且投票的理由是什麼？ – kinggs

這應該工作： https://jsfiddle.net/0bsygLsh/

.container { 
    width: 100%; 
    overflow:hidden; 

    .sidebar { 
    width:280px; 
    display:inline-block; 
    float:left; 
    } 

    .home { 
    width:auto; 
    } 
}

來源

2017-08-15 12:13:25 pryolo

好像你需要了解的CSS 顯示屬性。這也許是處理CSS時最重要的事情。請看這裏https://www.w3schools.com/cssref/pr_class_display.asp

下面是使用display: flex解決您的問題的示例。雖然你的問題可以通過幾種方式解決。考慮嘗試使用display: inline。

.container { 
 
    display: flex; 
 
    height: 100vh; 
 
} 
 

 
.sidebar { 
 
    flex-basis: 100px; 
 
    background-color: red; 
 
} 
 

 
.home { 
 
    flex: 1; 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="sidebar"> 
 
    I'm the sidebar 
 
    </div> 
 
    <div class="home"> 
 
    I'm the home page 
 
    </div> 
 
</div>

來源

2017-08-15 12:14:15 Normangorman

是的，我會的。大多數情況下，我只使用'inline'，'inline-block'作爲'display'屬性。這就是爲什麼我沒有意識到這一點感謝您的知識！:) –

如果你想使家庭DIV全寬度和側邊欄DIV應該是在它的上面，則CSS將以下內容：

.container { 
     width: 100%; 
     position: relative; 
    } 
    .sidebar { 
     width: 280px; 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 

    .home { 
     width: 100%; 
     padding-left: 280px; 
    }

或者，如果你想要保持它們並排，那麼css應該如下：

.container { 
     width: 100%; 
} 
.container:after { 
    display: table; 
    content: ""; 
    clear: both; 
} 
.sidebar { 
    float: left; 
    width: 280px; 
} 

.home { 
    float: left; 
    width: calc(100% - 280px); 
}

來源

2017-08-15 12:21:42 Shuvo

回答

相關問題