Question

以下是相关网站。 http://www.splintercomm.net 我需要divs彼此相邻，同时保持间隔距离。总之，我不希望它们堆叠，我希望它们并排。

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;
}

Answer 1

你可以使用这个属性内联div：

display:inline-block;

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

<doctype html>

应该是

<!doctype html>

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

Answer 2

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

在任何情况下，我都会将身体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%;
}

请注意，左边距必须小于宽度的2％减去所有边框（4px），否则主体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％。

Answer 3

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

中删除div#body

使用css </div>的HTML <div>放置问题

3 个答案: