我在 jsfiddle 中举了一个简单的例子来向你展示正在发生的事情，然后我将解释我想要实现的目标..
(代码 html - 在 jsfiddle 中)
<html>
<head>
</head>
<body>
<div class="box1top">
</div>
<div class="box1middle">
<p> Test </p><br />
<p> Test </p>
</div>
<div class="box1bottom">
</div>
<div class="box1top">
</div>
<div class="box1middle">
<p> Test </p><br />
<p> Test </p>
</div>
<div class="box1bottom">
</div>
</body>
</html>
(代码 css - 在 jsfiddle 中)
.box1top {
width: 150px;
height:30px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
margin-top:10px;
}
.box1middle {
width: 150px;
height:200px;
background-color:#676767;
margin-left:10px;
margin-right:10px;
}
.box1bottom {
width: 150px;
height:10px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
}
.box2top {
width: 150px;
height:30px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
}
.box2middle {
width: 150px;
height:200px;
background-color:#676767;
margin-left:10px;
margin-right:10px;
}
.box2bottom {
width: 150px;
height:10px;
background-color:#373737;
margin-left:10px;
margin-right:10px;
}
在上面的示例中，背景颜色将是包含文本的框的图像(分为 3 个图像)
但是我想在浏览器窗口中并排显示这些元素，而不是一个一个地显示。我已经尝试过 float 元素等，但我似乎无法做到这一点？
有人有什么想法吗？感谢任何帮助
谢谢， 卡洛斯
最佳答案
编码(任何)时的一般原则是保持干燥(不要重复自己)。
参见此处:http://jsfiddle.net/4UMLq/21/
幸运的是，CSS 使我们能够轻松地完成此任务:
.box{
float:left;
margin:10px 10px 0 10px;
width: 150px;
}
.box-top {
height:30px;
background-color:#373737;
}
.box-middle {
height:200px;
background-color:#676767;
}
.box-bottom {
height:10px;
background-color:#373737;
}
#box2{
margin-left:0;
}
HTML:
<div id="box1" class="box">
<div class="box-top">
</div>
<div class="box-middle">
<p> Test </p>
<p> Test </p>
</div>
<div class="box-bottom">
</div>
</div>
<div id="box2" class="box">
<div class="box-top">
</div>
<div class="box-middle">
<p> Test </p>
<p> Test </p>
</div>
<div class="box-bottom">
</div>
</div>
请注意，顶部、中间和底部 div 分别嵌套在“框”div 中。没有理由创建重复的 boxNtop 等 CSS 定义，因为许多元素可能共享相同的类名。因此，如果您希望它们看起来都一样，很容易做到。
关于css - 两个箱子并排，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13058643/