Website
问题是content_right div总是出现在最后一个content_left div的右下角。现在，＃{1}}而不是#lay} div上的float: left;确实解决了这个问题，但它完全忽略了高度，因此它没有display: inline-block;。由于我的身高是动态的，我无法使用background-color，我也不能float:left;。无法在https://css-tricks.com/fighting-the-space-between-inline-block-elements/找到解决方案。 margin-top: -value;上的position: absolute;与[{1}}的工作方式类似，#layout_right上的float:left;没有帮助解决问题。
position: relative;#layout
答案 0 :(得分：0)
听起来你有这个＆＃34;空间符号会影响我的宽度计算＆＃34;问题。 Here's更简单地说明了这个问题：
使用此HTML，您实际上在标记中的div之间有空格符号，并且这些符号在DOM中转换为1个空格符号：
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
但是如果你用这种方式放置它们，就没有多余的空间，因此它们适合容器：
<div class="left">
</div><div class="center">
</div><div class="right">
</div>
一旦他使用inline-block元素，就必须处理这个问题，因为它们是＆＃34; inline＆＃34;并在该行中放置其他符号（包括空格）。
PS yeap，这里以相应的方式修改了你的代码片段，content_right现在在右边（参见下面的代码段）。但是你还有另外一个问题：默认情况下，inline-block个元素按基线定位，因此右侧colomn位于底部，所以我还添加了：
#layout_right {
vertical-align:top;
}
现在，您需要的是
body {
margin: 0;
padding: 0;
background-color: #F0641D;
font-family: "Trebuchet MS", sans-serif;
color: #c4c4c4;
}
a {
color: #F0641D;
text-decoration: none;
}
#heading {
font-weight: bold;
letter-spacing: 2px;
font-size: 20px;
}
#header {
width: 100%;
height: 64px;
background-color: #383838;
}
#header_content {
width: 1000px;
margin: 0 auto;
}
#header_content div {
float: left;
}
#header_logo {
width: 114px;
height: 64px;
background-color: #505050;
}
#header_navbar {
width: 772px;
text-align: center;
}
#header_navbar div {
float: none;
display: inline-block;
margin-right: -5px;
border-bottom: 4px solid #505050;
transition: border-bottom 0.5s linear, background-color 0.5s linear;
}
#header_navbar div a {
display: block;
font-size: 25px;
padding: 15.5px 25px;
}
#header_navbar div:hover {
border-bottom: 4px solid #F0641D;
background-color: #505050;
}
#layout {
width: 976px;
margin: 16px auto;
padding: 12px;
background-color: #383838;
}
#layout div {
display: inline-block;
}
#layout_left {
width: 684px;
margin: 0 16px -16px 0;
}
#content_left {
padding: 4px 8px;
margin-bottom: 16px;
box-shadow: 0 0 8px #F0641D;
}
#layout_right {
vertical-align:top;
}
#content_right {
width: 260px;
padding: 4px 8px;
box-shadow: 0 0 8px #F0641D;
}<!DOCTYPE html>
<html>
<head>
<title>Center of Rocket League eSports!</title>
<link href="style.php" type="text/css" rel="stylesheet" />
<link href="http://quersteil.eu//data/favicon.png" type="image/png" rel="icon">
<meta charset="UTF-8" />
<meta name="description" content="RocketLeague-Base provides every aspect of Rocket League eSports: News, Matches, Results, Events, Statistics and many more" />
</head>
<body>
<div id="header">
<div id="header_content">
<div id="header_logo">
<a href="http://quersteil.eu/"></a>
</div>
<div id="header_navbar">
<div id="news"><a href="index.php?page=news">News</a>
</div>
<div id="matches"><a href="index.php?page=matches">Matches</a>
</div>
<div id="results"><a href="index.php?page=results">Results</a>
</div>
<div id="events"><a href="index.php?page=events">Events</a>
</div>
<div id="stats"><a href="index.php?page=stats">Stats</a>
</div>
</div>
</div>
</div>
<div id="layout">
<div id="layout_left">
<div id="content_left">
<div id="heading">Welcome to RocketLeague-Base.com!</div>
<br>This site is currently under construction and is getting developed further and further everyday, be sure to check every now and then. When the site has finished it will be a data and information driven website all around Rocket League, comparable
towards <a href="http://www.hltv.org/" target="_blank">HLTV.org</a>. Rocket League eSports is on the rise and as are the expectations of everyone watching, to have an easy way looking for all the eSports action surrounding Rocket League. We are
in the makings of finishing the website as soon as possible, so that every Rocket League fan has a comfortable way to look at all News, Matches, Results, Events and Stats all around the great RL-eSports Scene. No need to go to 5 different webpages
anymore to look at upcoming matches or past Results, RocketLeague-Base.com is the solution!
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div><!-- removed white-space here! --><div id="layout_right">
<div id="content_right">
<img src="data/facebook.png">
<img src="data/twitter.png">
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
如果您希望#layout_right div位于内容的右侧，只需将以下内容添加到ur css ...
#layout_right {
float:right;
}
这将解决！
答案 2 :(得分：0)
body {
margin: 0;
padding: 0;
background-color: #F0641D;
font-family: "Trebuchet MS", sans-serif;
color: #c4c4c4;
}
a {
color: #F0641D;
text-decoration: none;
}
#heading {
font-weight: bold;
letter-spacing: 2px;
font-size: 20px;
}
#header {
width: 100%;
height: 64px;
background-color: #383838;
}
#header_content {
width: 1000px;
margin: 0 auto;
}
#header_content div {
float: left;
}
#header_logo {
width: 114px;
height: 64px;
background-color: #505050;
}
#header_navbar {
width: 772px;
text-align: center;
}
#header_navbar div {
float: none;
display: inline-block;
margin-right: -5px;
border-bottom: 4px solid #505050;
transition: border-bottom 0.5s linear, background-color 0.5s linear;
}
#header_navbar div a {
display: block;
font-size: 25px;
padding: 15.5px 25px;
}
#header_navbar div:hover {
border-bottom: 4px solid #F0641D;
background-color: #505050;
}
#layout {
width: 976px;
margin: 16px auto;
padding: 12px;
background-color: #383838;
display: flex;
}
#layout_left {
width: 684px;
margin: 0 16px -16px 0;
padding: 4px 8px;
margin-bottom: 16px;
box-shadow: 0 0 8px #F0641D;
}
#layout_right {
width: 260px;
padding: 4px 8px;
box-shadow: 0 0 8px #F0641D;
}<!DOCTYPE html>
<html>
<head>
<title>Center of Rocket League eSports!</title>
<link href="style.php" type="text/css" rel="stylesheet" />
<link href="http://quersteil.eu//data/favicon.png" type="image/png" rel="icon">
<meta charset="UTF-8" />
<meta name="description" content="RocketLeague-Base provides every aspect of Rocket League eSports: News, Matches, Results, Events, Statistics and many more" />
</head>
<body>
<div id="header">
<div id="header_content">
<div id="header_logo">
<a href="http://quersteil.eu/"></a>
</div>
<div id="header_navbar">
<div id="news"><a href="index.php?page=news">News</a>
</div>
<div id="matches"><a href="index.php?page=matches">Matches</a>
</div>
<div id="results"><a href="index.php?page=results">Results</a>
</div>
<div id="events"><a href="index.php?page=events">Events</a>
</div>
<div id="stats"><a href="index.php?page=stats">Stats</a>
</div>
</div>
</div>
</div>
<div id="layout">
<div id="layout_left">
<div id="content_left">
<div id="heading">Welcome to RocketLeague-Base.com!</div>
<br>This site is currently under construction and is getting developed further and further everyday, be sure to check every now and then. When the site has finished it will be a data and information driven website all around Rocket League, comparable
towards <a href="http://www.hltv.org/" target="_blank">HLTV.org</a>. Rocket League eSports is on the rise and as are the expectations of everyone watching, to have an easy way looking for all the eSports action surrounding Rocket League. We are
in the makings of finishing the website as soon as possible, so that every Rocket League fan has a comfortable way to look at all News, Matches, Results, Events and Stats all around the great RL-eSports Scene. No need to go to 5 different webpages
anymore to look at upcoming matches or past Results, RocketLeague-Base.com is the solution!
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="content_left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<!--
-->
<div id="layout_right">
<div id="content_right">
<img src="data/facebook.png">
<img src="data/twitter.png">
</div>
</div>
</div>
</body>
</html>