Question

我试图让主内容区域和边栏颜色左右无限延伸，就像我缩小时的页眉/页脚一样。但无论出于何种原因......它会显示背景颜色（黑色）。

此处有问题的网站：https://www.Answers.legal

＆＃13;

#main {
	width: 100%;
}

.content {
	width: 80%;
	background: #cccccc;
	height: 900px;
	display: inline-block;
	vertical-align: top;
	position: relative;
	box-sizing: border-box;
	padding: 10px;
	float: left;
}

.sidebar {
	background: #424242;
	height: 900px;
	width: 20%;
	display: inline-block;
	box-sizing: border-box;
	float: right;
	padding: 10px;
}

.wrapper {
    width: 1300px;
    margin: 0 auto;
    position: relative;
    background: transparent;
}

＆＃13;

<div id="main"><div class="wrapper">
<div class="content">
Welcome to Answers.Legal!
</div>
<?php $path = $_SERVER['DOCUMENT_ROOT'];
   $path .= "/common/sidebar.php";
   include_once($path); ?>
</div></div>

＆＃13;

我该怎么办？

感谢。

Answer 1

将float: left;添加到.content，您应该没问题。

Answer 2

如果是标题，则外部元素的背景颜色会延伸到页面宽度。对于主要内容，情况并非如此。挑战之所以出现，是因为您有垂直列排列而不是水平行。

您可能希望将背景颜色移动到#main，作为垂直重复图像或CSS渐变。 Here's a start 表示第二个选项。

保持2 Divs以包装为中心

2 个答案: