4

这是有问题的网站。 http://www.splintercomm.net 我需要 div 彼此相邻，同时保持水平间隔。简而言之，我不希望它们堆叠在一起，我希望它们并排。

body {
background-image:url('wild_oliva.png');
} 
div.container   {
overflow: hidden;
}
div.end {
border-style:solid;
border-width:1px;
background-image:url(stressed_linen.jpg);
border-radius: 15px 15px 15px 15px;
margin-bottom:auto
}
div#body {
border-style:solid;
border-width:1px;
background-image:url(stressed_linen.jpg);
border-radius: 15px 15px 15px 15px;
margin-left:20%;
overflow: hidden;
width:80%;
}
div#sidebar {
border-style:solid;
border-width:1px;
background-image:url(stressed_linen.jpg);
border-radius: 15px 15px 15px 15px;

float:left;
width:18%;
float:left;
}
4

3 回答 3

1

您可以使用此属性使 div 内联：

display:inline-block;

注意 1：您的 doctype 声明中有错误

<doctype html>

应该

<!doctype html>

注意 2：我在您的示例代码中只看到一个 div。

于 2012-10-27T01:11:48.817 回答
1

我不确定这里有什么不适合你，因为我看到这些块在 Firefox、chrome 和 safari 中并排排列。这只是IE7中的问题吗？

无论如何，我也会将 body div 浮动到左侧。将 div#body css 替换为以下内容：

div#body {
  float: left;
  margin-left: 1%;
  border-style:solid;
  border-width:1px;
  background-image:url(stressed_linen.jpg);
  border-radius: 15px 15px 15px 15px;
  overflow: hidden;
  width:80%;
}

请注意，左边距必须小于宽度减去所有边框（4px）的 2%，否则 body div 将太宽并流到侧边栏下方。

另一种选择是将 div#body 浮动到右侧并省略左边距：

div#body {
  float: right;
  border-style:solid;
  border-width:1px;
  background-image:url(stressed_linen.jpg);
  border-radius: 15px 15px 15px 15px;
  overflow: hidden;
  width:80%;
}

基本上，如果您希望所有内容都排在同一条线上，则边距、边框、填充和框区域的总宽度必须小于或等于浏览器（窗口）宽度的 100%。

18%（侧边栏宽度）+ 80%（正文宽度）+ 2px（侧边栏边框）+ 2px（正文边框）

= 98% + 4px，在大多数浏览器宽度下小于 100%。

于 2012-10-27T01:29:47.120 回答
0

虽然我不确定我是否理解这个问题，margin:20%;但从div#body

于 2012-10-27T01:39:54.950 回答