Question

我试图创建一个包含3个或更多DIV盒子的流畅布局，这些盒子可以放在一个看起来像这样的固定或流体容器中：

example:

到目前为止，我已经使用了display：inline-block来使两个框彼此相邻，这确实有效，但是当宽度设置为48％且margin设置为1％时（当所有内容都是内联时）如果我正确的话，应该加起来总共100％？）第二个div继续换行。

关于第3个方框，当我将宽度设置为98％（然后应用1％的边距）时，框突出了右边的容器......

我最终得到的是： problem:

我可以改变并减少％以使它完全符合我的要求，但是前两个盒子和底部的大盒子不能很好地对齐。

例如： http://imgur.com/igI73Y1

基本上我试图制作的是一个快速的片段，我可以添加到网站上的任何容器，提供一个漂亮，干净的布局，准备好添加内容。

（我做了几个不同的布局）

我想尝试限制创建多少个类，以便我可以根据需要轻松编辑布局。

例如：

.contentbox（使这些框工作的主要'设置'）

.smallbox（如果3个div一个接一个地设置为.smallbox，则3将显示内联）

.normalbox（如果2个div一个接一个地设置为.normalbox，则2将显示为内联）

.largebox（如果1个div设置为.largebox，它将转到容器的边缘）

我想使用％，因此不管容器的大小如何，它总是适合而不必更改宽度像素等。

目前这就是我所拥有的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 600px;
border: thin solid #000;
}
.contentbox {
position:relative;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00F;
border-right-color: #00F;
border-bottom-color: #00F;
border-left-color: #00F;
display: inline-block;
width: 48%;
margin: 1%;
vertical-align: top;

}
.largebox {
width:100%;
}
</style>
</head>

<body>
<div id="container">
<div class="contentbox">class="contentbox"</div>
<div class="contentbox">class="contentbox"</div>
<div class="contentbox largebox">class="contentbox largebox"</div>
</div>
</body>
</html>

感谢您提前获取任何帮助！

Answer 1

您必须考虑到边框占据宽度，并且大容器任一侧的1％边距意味着它只能小于100％宽度。我将它设置为94，将小的设置为45并将填充设置为0！重要;现在它有效。

#container {
  width: 100%;
  padding: 0!important;
  border: thin solid #000;
}
.contentbox {
  position: relative;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #00F;
  border-right-color: #00F;
  border-bottom-color: #00F;
  border-left-color: #00F;
  display: inline-block;
  width: 45%;
  margin: 1%!important;
  vertical-align: top;
}
.largebox {
  width: 94%;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Containers</title>

</head>

<body>
  <div id="container">
    <div class="contentbox">class="contentbox"</div>
    <div class="contentbox">class="contentbox"</div>
    <div class="contentbox largebox">class="contentbox largebox"</div>
  </div>
</body>

</html>

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 100%;
border: thin solid #000;float:left;
}
.contentbox {
position:relative;
border:0px solid #00f;
display: inline-block;
width: 48%;float:left;box-shadow:0px 0px 2px 0px #555555;
margin: 1%;
vertical-align: top;

}
.largebox {
width:98%;margin: 1%;
}
</style>
</head>

<body>
<div id="container">
<div class="contentbox">class="contentbox"</div>
<div class="contentbox">class="contentbox"</div>
<div class="contentbox largebox">class="contentbox largebox"</div>
</div>
</body>
</html>

CSS布局和内联块，宽度为％

2 个答案: