CSS布局使用內聯塊在父div中留出空隙
[英]CSS Layout using inline-block leaving gap in parent div
問題描述
這是網站設計課程的入門課程。 我們希望模仿一個布局。
我正在使用inline-block來並排顯示兩列，除了黑色主div右邊的一些空間外，我對結果感到滿意。 我不知道為什么父div不能縮小以適合內聯塊div。
我以前從未使用過jsfiddle，但是我認為這是使用我的html / css代碼的正確jsfiddle：
https://jsfiddle.net/j8jpqm9p/
<!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降低幾個百分點，並最大程度地減少灰色間隙，但這種情況不會消失。
是否有一些明確的命令來強制容器div縮小以適合其子div？
4 個解決方案
解決方案1
1 已采納 2016-08-22 04:54:17
問題是您的.container不是內聯塊，而是塊元素。 並且block元素不會環繞內容，而是始終填充整個可用寬度。
要解決您的問題，可以將以下行添加到.container。
display: inline-block;
這是更正后的小提琴： https : //jsfiddle.net/j8jpqm9p/11/這也將使您的容器成為一個內聯塊，並使其圍繞內容。
我不確定為什么要使用最小寬度和最大寬度。 這將使站點的總寬度取決於側容器中的內容。 您的網站寬度將介於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填充）
我希望它能解決您的問題。 請記住，盡管有更好的方法來構造這些類型的網格。
解決方案2
1 2016-08-22 05:04:10
我想，如果要這樣做，則需要添加一些內容。
首先，您應該將set 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{ 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; min-width:1200px; max-width:1300px; margin: 0 auto; white-space: nowrap; } .topcont{ padding:10px 0px 25px 25px; background-color:white; } .sidecont{ padding: 0px 0px 0px 10px; display:inline-block; width: 23.1%; min-width:200px; max-width:300px; background-color:green; margin:0px; height: 700px; } .maincont{ text-align:center; display:inline-block; width: 76.9%; min-width:1000px; background-color:black; color:white; height:700px; margin:0px; } .bottomcont{ background-color:white; padding: 0px 0px 25px 10px; }
<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>
但是實際上，flexbox是更好的選擇。
解決方案3
1 2016-08-22 05:13:11
您可以設置容器的寬度以正確裝入容器。
解決方案4
0 2016-08-22 03:44:21
試試這個代碼
.sidecont{
padding: 0px 0px 0px 10px;
display:inline-block;
mirgin:auto;
background-color:green;
height: 700px;
}
無法將父級內聯塊DIV與子級內聯塊DIV居中
[英]Can't center a parent inline-block DIV with a child Inline-block DIV inside
CSS-縮小屏幕時，使div的（display：inline-block）布局不變
[英]CSS - Make div's (display:inline-block) layout not change when shrinking screen
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.