CSS布局使用内联块在父div中留出空隙

Droz 发表于 Dev

德罗兹

这是网站设计课程的入门课程。我们希望模仿一个布局。

我正在使用inline-block来并排显示两列，除了黑色主div右边的一些空间外，我对结果感到满意。我不知道为什么父div不能缩小以适合内联块div。

我以前从未使用过jsfiddle，但是我认为这是使用我的html / css代码的正确jsfiddle：

    <!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？

戴维·贝特（Davy Baert）

问题是您的.container不是内联块，而是块元素。并且block元素不会环绕内容，但是将始终填充整个可用宽度。

要解决您的问题，您可以将以下行添加到.container。

display: inline-block;

这是更正后的小提琴：https : //jsfiddle.net/j8jpqm9p/11/这也将使您的容器成为内联块，并使其围绕内容。

我不确定为什么要使用最小宽度和最大宽度。这将使站点的总宽度取决于侧容器中的内容。您的网站宽度将介于1200像素到1300像素之间，具体取决于您在.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;
}