Question

这是介绍网页设计课程。我们期望模仿布局。

我使用内联块并排获得两列，我对结果很满意，除了黑色主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设置为几个百分点并最小化灰色间隙，但它不会消失。

是否有一些明确的命令强制容器div缩小以适应它的子div？

Answer 1

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

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

display: inline-block;

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

我不知道你为什么要使用min-width和max-width。这将使您网站的总宽度取决于您的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填充）

我希望它能解决你的问题。请记住，尽管有更好的方法来构建这些类型的网格。

Answer 2

我认为如果你想这样做，你需要添加一些东西。

首先，您应该将public static <T> T max(Collection<? extends T> coll, Comparator<? super T> comp)全局设置为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;

}

但实际上，flexbox是一个更好的方法。

Answer 3

您可以设置容器的宽度以使其正确适合。

Answer 4

试试这段代码

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

使用内联块的CSS布局在父div中留下间隙

4 个答案: