CSS佈局在父div中使用內聯塊離開間隙

這是一個介紹到網頁設計課程。我們預計會模仿佈局。CSS佈局在父div中使用內聯塊離開間隙

我正在使用內聯塊並排獲取兩列，除了黑色主div右側的一些空間外，我對結果感到滿意。我無法弄清楚爲什麼父級div不會縮小以適合內聯塊div。

我以前從未使用過的jsfiddle，但是這是我相信這是一個正確的jsfiddle我的HTML/CSS代碼：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 

<style> 
a:link{ 
    color:#008000; 
    font-size:1.15em; 
    font-weight:bold; 
} 
a:hover{ 
    color:#ccffcc; 
    font-weight:bold; 
    font-size:1.15em; 
    text-decoration:underline; 
} 
body{ 
    background-color:gray; 
} 
.container{ 
    overflow:hidden; 
    border-width:2px; 
    border-style:solid; 
    border-color:blue; 
    border-radius:25px 25px 25px 25px; 
} 
.topcont{ 
    padding:10px 0px 25px 25px; 
    background-color:white; 

} 
.sidecont{ 
    padding: 0px 0px 0px 10px; 
    display:inline-block; 
    min-width:200px; 
    max-width:300px; 
    background-color:green; 
    margin:0px; 
    height: 700px; 
} 
.maincont{ 
    text-align:center; 
    display:inline-block; 
    width:1000px; 
    background-color:black; 
    color:white; 
    height:700px; 
    margin:0px; 
} 
.bottomcont{ 
    background-color:white; 
    padding: 0px 0px 25px 10px; 

} 
</style> 
</head> 
<body> 
    <div class="container"> 
     <div class="topcont"> 
     <a href="http://www4.uwm.edu/" target="_blank" >Link One</a> | 
     <a href="http://www.uwgb.edu/" target="_blank" >Link Two</a> | 
     <a href="http://www.uwosh.edu/" target="_blank" >Link Three</a> | 
     <a href="http://www.wisc.edu/" target="_blank" >Link Four</a> | 
     <a href="http://www.uwec.edu/" target="_blank" >Link Five</a> 
     </div> 
     <div class="sidecont">The sidebar 
     </div><div class="maincont"> Main content of the page goes in this container 
     </div> 
     <div class="bottomcont">Contact information 
     </div> 
    </div> 


</body> 
</html>

我試圖發佈鏈接到我期望複製的佈局，但由於我的代表，我僅限於兩個鏈接。它基本上完全一樣，沒有黑色主容器右側的灰色空間/第三列。

在此先感謝您的幫助。

編輯以增加：無論是導致父div（容器）如此大，它似乎不是topcont或bottomcont div。我可以將它們都設置爲50％的寬度，並且它們適當縮小，但主容器格保持原樣。

我可以手動設置容器股利下降幾個百分點，並儘量減少灰色的差距，但它不會消失。

是否有一些明確的命令強制容器div縮小以適應它的子div？

來源

2016-08-22 Droz

的問題是，你的.container不是inline-block的但塊元素。塊元素不會環繞內容，但會始終填充整個可用寬度。

要解決您的問題，您可以將以下行添加到.container。

display: inline-block;

以下是更正小提琴：https://jsfiddle.net/j8jpqm9p/11/ 這會讓你的容器內聯塊以及並使其環繞的內容。

我不知道你爲什麼使用最小寬度和最大寬度。這將使您的站點的總寬度取決於sidecontainer中的內容。您的網站寬度將介於1200px和1300px之間，具體取決於您放入的內容.sidecont

通常您希望您的容器具有固定的寬度，而不會根據其中的內容進行更改。

.container{ 
    width: 1200px; 
    margin: auto; 
} 

.sidecont{ 
    padding: 0px 0px 0px 10px; 
    display:inline-block; 
    width: 200px; 
    box-sizing: border-box; 
    background-color:green; 
    height: 700px; 
} 

.maincont{ 
    text-align:center; 
    display:inline-block; 
    width:1000px; 
    background-color:black; 
    color:white; 
    height:700px; 
}

請注意，我們添加了一個額外的行。sidecont：

box-sizing: border-box;

這是爲了確保元素的填充不計算元素的寬度。沒有這條線，你的sidecontent塊將是210個像素寬。（200px + 10px padding）

我希望它能解決您的問題。請記住，有很多更好的方法來構建這些類型的網格。

來源

2016-08-22 04:54:17

這是正確的答案。謝謝！至於側欄寬度，他的確切要求是「側欄（綠色部分）寬度在200-300像素之間」。我不確定他的字面意思，還是我可以在兩者之間選擇一些價值。我在提交的方式上被撕毀。我可能會用可變寬度提交，並留下一個說明爲什麼我這樣做。 – Droz

試試這個代碼

.sidecont{ 
    padding: 0px 0px 0px 10px; 
    display:inline-block; 
    mirgin:auto; 
    background-color:green; 
    height: 700px; 
}

來源

2016-08-22 03:44:21 Abhishek

謝謝，我試着改變邊距爲自動但它沒有區別。灰色條仍然在右側。 – Droz

hey dorz在答案上打勾 – Abhishek

我想你需要添加一些東西，如果你想這樣做。

首先，您應該將全局設置box-sizing設置爲border-box，因爲這樣可以更輕鬆地處理靈活的寬度。

* { 
    box-sizing: border-box; 
}

接下來，你需要設置在你列的百分比寬度，使他們能夠彎曲，然後設置的1000px一個最小寬度，以你的主要內容列。

.sidecont { 
    width: 23.1%; /* 300px/1300px */ 
    max-width: 300px; 
    min-width: 300px; 
} 

.maincont { 
    width: 76.9%; /* 1000px/1300px */ 
    min-width: 1000px; 
}

然後，您需要在容器上設置最小和最大寬度，以防止容器過大和過小。您還需要給它一個margin: 0 auto以正確居中容器，並且由於您正在使用內聯塊，因此您需要添加white-space: nowrap以防止列打包。

.container { 
    min-width: 1200px; 
    max-width: 1300px; 
    margin: 0 auto; 
    white-space: nowrap; 
}

最終結果將如下所示：

* { 
 
    box-sizing: border-box; 
 
} 
 
a:hover{ 
 
\t color:#ccffcc; 
 
\t font-weight:bold; 
 
\t font-size:1.15em; 
 
\t text-decoration:underline; 
 
} 
 
body{ 
 
\t background-color:gray; 
 
} 
 
.container{ 
 
\t overflow:hidden; 
 
\t border-width:2px; 
 
\t border-style:solid; 
 
\t border-color:blue; 
 
\t border-radius:25px 25px 25px 25px; 
 
    min-width:1200px; 
 
    max-width:1300px; 
 
    margin: 0 auto; 
 
    white-space: nowrap; 
 
} 
 
.topcont{ 
 
\t padding:10px 0px 25px 25px; 
 
\t background-color:white; 
 

 
} 
 
.sidecont{ 
 
\t padding: 0px 0px 0px 10px; 
 
\t display:inline-block; 
 
    width: 23.1%; 
 
\t min-width:200px; 
 
\t max-width:300px; 
 
\t background-color:green; \t 
 
\t margin:0px; 
 
\t height: 700px; 
 
} 
 
.maincont{ 
 
\t text-align:center; 
 
\t display:inline-block; 
 
    width: 76.9%; 
 
\t min-width:1000px; 
 
\t background-color:black; 
 
\t color:white; 
 
\t height:700px; 
 
\t margin:0px; 
 
} 
 
.bottomcont{ 
 
\t background-color:white; 
 
\t padding: 0px 0px 25px 10px; 
 

 
}

<div class="container"> 
 
    <div class="topcont"> 
 
     <a href="http://www4.uwm.edu/" target="_blank" >Link One</a> | 
 
    \t <a href="http://www.uwgb.edu/" target="_blank" >Link Two</a> | 
 
    \t <a href="http://www.uwosh.edu/" target="_blank" >Link Three</a> | 
 
    \t <a href="http://www.wisc.edu/" target="_blank" >Link Four</a> | 
 
    \t <a href="http://www.uwec.edu/" target="_blank" >Link Five</a> 
 
    </div> 
 
    <div class="sidecont"> 
 
     The sidebar 
 
    </div> 
 
    <div class="maincont"> 
 
     Main content of the page goes in this container 
 
    </div> 
 
    <div class="bottomcont"> 
 
     Contact information 
 
    </div> 
 
</div>

現實雖然，那麼Flexbox將是一個更好的路要走。

來源

2016-08-22 05:04:10

該課程沒有涉及flexbox，所以我正在使用我們提供的工具解決它。但是，根據您的評論（和其他閱讀），我正在注意flexbox並會做一些閱讀。初看起來我並不完全明白它在做什麼，但它似乎被認爲是這種類型的最佳解決方案。謝謝！ – Droz

您可以正確設置容器的寬度以適合它。

來源

2016-08-22 05:13:11

CSS佈局在父div中使用內聯塊離開間隙

回答

相關問題