为什么这个div完全被推出了它的父母？

时间：2017-05-05 11:05:38

标签： html css css3 layout

我对网络开发很陌生，我正在尝试为我正在开始制作的网站提供一个不错的布局。我把它布置成有一个标题，中间有三列，还有一个页脚。

在左栏中，将用于导航，我正在尝试使用导航链接，然后选择要分隔的边框，然后是一些按钮。将包含按钮的div完全从左列中取出并被推到它下面，我不明白为什么。

所有div都有display: inline-block，如果相关的话。

提前致谢！

编辑：为了清楚起见，我希望将#left-buttons div放在#left-nav div右侧，#left-nav边界与边界之间的间隙中#site-left。

代码：

html, body, #site-content {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	font-size: 0;
}

body {
	background: #fbfbfbf;
}

#site-content {
	overflow: auto;
}

#site-content > div {
	display: inline-block;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 0;
	margin: 0;
}

#site-top {
	height: 125px;
	width: 100%;
	border: 5px solid #000;
	border-image: linear-gradient(to right, #fff 0%, rgba(0,0,0,.7) 25%, rgba(0,0,0,.7) 75%, #fff 100%);
	-webkit-border-image: -webkit-linear-gradient(left, #fff 0%, rgba(0,0,0,.7) 25%, rgba(0,0,0,.7) 75%, #fff 100%);
	-moz-border-image: -moz-linear-gradient(left, #fff 0%, rgba(0,0,0,.7) 25%, rgba(0,0,0,.7) 75%, #fff 100%);
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-image-slice: 1;
	box-shadow: 0 6px 10px -5px #333;
	-webkit-box-shadow: 0 6px 10px -5px #333;
	-moz-box-shadow: 0 6px 10px -5px #333;
}

#site-left, #site-right {
	height: calc(100% - 175px);
	width: 175px;
}

#site-left {
	border: 3px solid #222;
	border-image: linear-gradient(to bottom, #777 0%, rgba(0,0,0,.85) 15%, rgba(0,0,0,.85) 85%, #777 100%);
	-webkit-border-image: -webkit-linear-gradient(top, #777 0%, rgba(0,0,0,.85) 15%, rgba(0,0,0,.85) 85%, #777 100%);
	-moz-border-image: -webkit-linear-gradient(top, #777 0%, rgba(0,0,0,.85) 15%, rgba(0,0,0,.85) 85%, #777 100%);
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
	border-image-slice: 1;
	box-shadow: 6px 0 10px -5px #333;
	-webkit-box-shadow: 6px 0 10px -5px #333;
	-moz-box-shadow: 6px 0 10px -5px #333;
}

#site-left #left-nav {
	height: 100%;
	width: 135px;
	border: 2px solid #111;
	border-image: linear-gradient(to bottom, #777 0%, rgba(0,0,0,.95) 15%, rgba(0,0,0,.95) 85%, #777 100%);
	-webkit-border-image: -webkit-linear-gradient(top, #777 0%, rgba(0,0,0,.95) 15%, rgba(0,0,0,.95) 85%, #777 100%);
	-moz-border-image: -webkit-linear-gradient(top, #777 0%, rgba(0,0,0,.95) 15%, rgba(0,0,0,.85) 95%, #777 100%);
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
	border-image-slice: 1;
}

#site-left #left-buttons {
	height: 100%;
	width: 40px;
}

#left-buttons .left-button {
	margin: auto;
	height: 20px;
	width: 20px;
	border-radius: 5px;
}

#left-buttons .left-button.red {
	background-color: rgba(255,0,0,.95);
	border: 1px solid rgba(255,0,0,.75);
	box-shadow: 0 0 4px 2px rgba(255,0,0,.5);
}

#left-buttons .left-button.red:hover {
	box-shadow: 0 0 6px 2px rgba(255,0,0,.8);
}

#left-buttons .left-button {
	transition: box-shadow .4s;
}

#left-buttons .left-button:hover {
	cursor: pointer;
}

#site-right {
	border: 3px solid #222;
	border-image: linear-gradient(to bottom, #777 0%, rgba(0,0,0,.85) 15%, rgba(0,0,0,.85) 85%, #777 100%);
	-webkit-border-image: -webkit-linear-gradient(top, #777 0%, rgba(0,0,0,.85) 15%, rgba(0,0,0,.85) 85%, #777 100%);
	-moz-border-image: -webkit-linear-gradient(top, #777 0%, rgba(0,0,0,.85) 15%, rgba(0,0,0,.85) 85%, #777 100%);
	border-top: 0;
	border-bottom: 0;
	border-right: 0;
	border-image-slice: 1;
	box-shadow: -6px 0 10px -5px #333;
}

#site-content #site-main {
	height: calc(100% - 175px);
	width: calc(100% - 350px);
	min-width: 480px;
	overflow-y: auto;
}

#site-bottom {
	height: 50px;
	width: 100%;
	border: 5px solid #000;
	border-image: linear-gradient(to right, #fff 0%, rgba(0,0,0,.7) 25%, rgba(0,0,0,.7) 75%, #fff 100%);
	-webkit-border-image: -webkit-linear-gradient(left, #fff 0%, rgba(0,0,0,.7) 25%, rgba(0,0,0,.7) 75%, #fff 100%);
	-moz-border-image: -moz-linear-gradient(left, #fff 0%, rgba(0,0,0,.7) 25%, rgba(0,0,0,.7) 75%, #fff 100%);
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	border-image-slice: 1;
	box-shadow: 0 -6px 10px -5px #333;
	-webkit-box-shadow: 0 -6px 10px -5px #333;
	-moz-box-shadow: 0 -6px 10px -5px #333;
}
<!DOCTYPE html>

<html>

	<head>

		<title>Web Tests</title>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" type="text/css" href="app.css">

	</head>

	<body>

		<div id="site-content">
			
			<div id="site-top">
			</div>

			<div id="site-left">
				
				<div id="left-nav">
				</div>
				
				<div id="left-buttons">
					<!--<div class="left-button red">
					</div>-->
				</div>

			</div>

			<div id="site-main">
			</div>

			<div id="site-right">
			</div>

			<div id="site-bottom">
			</div>

		</div>

		<!-- Scripts -->
		<script type="text/javascript" src="app.js"></script>
		<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <!-- JQuery -->
		<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" integrity="sha256-H28SdxWrZ387Ldn0qogCzFiUDDxfPiNIyJX7BECQkDE=" crossorigin="anonymous"></script> <!-- JQuery Color  -->

	</body>

</html>

有问题的HTML元素是：   - <div id="site-left">   - <div id="left-nav">   - <div id="left-buttons">

2 个答案:

答案 0 :(得分：1)

这是因为#site-left #left-nav和#site-left #left-buttons都有100％的身高。将其更改为50％或您喜欢的任何其他值，它将起作用：

（或者只是将内容放入这些元素并删除height参数，让它们的高度取决于内容）

＆＃13;
＆＃13; 
html,
body,
#site-content {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-size: 0;
}

body {
  background: #fbfbfb;
}

#site-content {
  overflow: auto;
}

#site-content>div {
  display: inline-block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 0;
  margin: 0;
}

#site-top {
  height: 125px;
  width: 100%;
  border: 5px solid #000;
  border-image: linear-gradient(to right, #fff 0%, rgba(0, 0, 0, .7) 25%, rgba(0, 0, 0, .7) 75%, #fff 100%);
  -webkit-border-image: -webkit-linear-gradient(left, #fff 0%, rgba(0, 0, 0, .7) 25%, rgba(0, 0, 0, .7) 75%, #fff 100%);
  -moz-border-image: -moz-linear-gradient(left, #fff 0%, rgba(0, 0, 0, .7) 25%, rgba(0, 0, 0, .7) 75%, #fff 100%);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-image-slice: 1;
  box-shadow: 0 6px 10px -5px #333;
  -webkit-box-shadow: 0 6px 10px -5px #333;
  -moz-box-shadow: 0 6px 10px -5px #333;
}

#site-left,
#site-right {
  height: calc(100% - 175px);
  width: 175px;
}

#site-left {
  border: 3px solid #222;
  border-image: linear-gradient(to bottom, #777 0%, rgba(0, 0, 0, .85) 15%, rgba(0, 0, 0, .85) 85%, #777 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #777 0%, rgba(0, 0, 0, .85) 15%, rgba(0, 0, 0, .85) 85%, #777 100%);
  -moz-border-image: -webkit-linear-gradient(top, #777 0%, rgba(0, 0, 0, .85) 15%, rgba(0, 0, 0, .85) 85%, #777 100%);
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-image-slice: 1;
  box-shadow: 6px 0 10px -5px #333;
  -webkit-box-shadow: 6px 0 10px -5px #333;
  -moz-box-shadow: 6px 0 10px -5px #333;
    background: red;

}

#site-left #left-nav {
  height: 50%;
  width: 135px;
  border: 2px solid #111;
  border-image: linear-gradient(to bottom, #777 0%, rgba(0, 0, 0, .95) 15%, rgba(0, 0, 0, .95) 85%, #777 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #777 0%, rgba(0, 0, 0, .95) 15%, rgba(0, 0, 0, .95) 85%, #777 100%);
  -moz-border-image: -webkit-linear-gradient(top, #777 0%, rgba(0, 0, 0, .95) 15%, rgba(0, 0, 0, .85) 95%, #777 100%);
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-image-slice: 1;
}

#site-left #left-buttons {
  height: 50%;
  width: 40px;
  background: blue;
}

#left-buttons .left-button {
  margin: auto;
  height: 20px;
  width: 20px;
  border-radius: 5px;
}

#left-buttons .left-button.red {
  background-color: rgba(255, 0, 0, .95);
  border: 1px solid rgba(255, 0, 0, .75);
  box-shadow: 0 0 4px 2px rgba(255, 0, 0, .5);
}

#left-buttons .left-button.red:hover {
  box-shadow: 0 0 6px 2px rgba(255, 0, 0, .8);
}

#left-buttons .left-button {
  transition: box-shadow .4s;
}

#left-buttons .left-button:hover {
  cursor: pointer;
}

#site-right {
  border: 3px solid #222;
  border-image: linear-gradient(to bottom, #777 0%, rgba(0, 0, 0, .85) 15%, rgba(0, 0, 0, .85) 85%, #777 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #777 0%, rgba(0, 0, 0, .85) 15%, rgba(0, 0, 0, .85) 85%, #777 100%);
  -moz-border-image: -webkit-linear-gradient(top, #777 0%, rgba(0, 0, 0, .85) 15%, rgba(0, 0, 0, .85) 85%, #777 100%);
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  border-image-slice: 1;
  box-shadow: -6px 0 10px -5px #333;
}

#site-content #site-main {
  height: calc(100% - 175px);
  width: calc(100% - 350px);
  min-width: 480px;
  overflow-y: auto;
}

#site-bottom {
  height: 50px;
  width: 100%;
  border: 5px solid #000;
  border-image: linear-gradient(to right, #fff 0%, rgba(0, 0, 0, .7) 25%, rgba(0, 0, 0, .7) 75%, #fff 100%);
  -webkit-border-image: -webkit-linear-gradient(left, #fff 0%, rgba(0, 0, 0, .7) 25%, rgba(0, 0, 0, .7) 75%, #fff 100%);
  -moz-border-image: -moz-linear-gradient(left, #fff 0%, rgba(0, 0, 0, .7) 25%, rgba(0, 0, 0, .7) 75%, #fff 100%);
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-image-slice: 1;
  box-shadow: 0 -6px 10px -5px #333;
  -webkit-box-shadow: 0 -6px 10px -5px #333;
  -moz-box-shadow: 0 -6px 10px -5px #333;
}
＆＃13; 
<!DOCTYPE html>

<html>

<head>

  <title>Web Tests</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" type="text/css" href="app.css">

</head>

<body>

  <div id="site-content">

    <div id="site-top">
    </div>

    <div id="site-left">

      <div id="left-nav">
      </div>

      <div id="left-buttons">
        <!--<div class="left-button red">
					</div>-->
      </div>

    </div>

    <div id="site-main">
    </div>

    <div id="site-right">
    </div>

    <div id="site-bottom">
    </div>

  </div>

  <!-- Scripts -->
  <script type="text/javascript" src="app.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <!-- JQuery -->
  <script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" integrity="sha256-H28SdxWrZ387Ldn0qogCzFiUDDxfPiNIyJX7BECQkDE=" crossorigin="anonymous"></script>
  <!-- JQuery Color  -->

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这就是为什么你应该总是将你的示例代码修剪到演示问题所需的绝对最小值。你的代码片段中只有太多的CSS要清楚地看到问题出在哪里 （另外，从一开始就不完全清楚你想要的结果是什么，但现在已经解决了。）

问题的简化版本是：

html, body, #site-content {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-size: 0;
}

#site-content > div {
  display: inline-block;
  box-sizing: border-box;
}

#site-left {
  height: 50%;
  width: 175px;
  border-right: 3px solid #222;
}

#site-left #left-nav {
  height: 100%;
  width: 135px;
  border-right: 2px solid #111;
}

#site-left #left-buttons {
  height: 100%;
  width: 40px;
}

/* Added for identification purposes */
#left-nav {font-size: 12px; color: #000; background: #AFA;}

#left-buttons {font-size: 12px; color: #000; background: #FF6;}
<div id="site-content">

  <div id="site-left">

    <div id="left-nav">
      nav
    </div>

    <div id="left-buttons">
      buts
    </div>

  </div>
</div>

（请注意，我还给了两个有问题的div一些背景颜色，这样你就可以真正看到它们的位置。这也是原始片段的一个问题，抱歉。）

现在您希望“buts”栏位于“nav”栏的右侧（在两个黑色边框之间），但由于两个问题，它不是。

首先，“nav”栏和“buts”栏都设置为默认display: block，因为#site-content > div选择器不适用于它们，只适用于#site-向左，display不继承 解决方案：从选择器中删除>。

然后第二个问题开始了：由于＃site-left宽度为175px，右边框为3px，因此两个条形内部只有172个空间。这还不够。 解决方案：重新计算条的宽度，考虑边界。

示例：

html, body, #site-content {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-size: 0;
}

#site-content div {                  /* removed > */
  display: inline-block;
  box-sizing: border-box; 
}

#site-left {
  height: 50%;
  width: 175px;
  border-right: 3px solid #222;
}

#site-left #left-nav {
  height: 100%;
  width: 132px;                      /* subtracted 3 pixels */
  border-right: 2px solid #111;
}

#site-left #left-buttons {
  height: 100%;
  width: 40px;
}

/* Added for identification purposes */
#left-nav {font-size: 12px; color: #000; background: #AFA;}

#left-buttons {
  font-size: 12px; color: #000; background: #FF6;}
<div id="site-content">

  <div id="site-left">

    <div id="left-nav">
      nav
    </div>

    <div id="left-buttons">
      buts
    </div>

  </div>
</div>

相关问题
最新问题