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中使用内联块离开间隙

回答

相关问题