两个盒子并排答案

【问题标题】：Two boxes side by side两个盒子并排
【发布时间】：2013-07-16 04:01:55
【问题描述】：

我在 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 个图像）

但是我想在浏览器窗口中并排显示这些，而不是在另一个下方显示。我尝试过浮动元素等，但我似乎无法做到这一点？

有人有什么想法吗？任何帮助表示赞赏

谢谢，卡洛斯

【问题讨论】：

你试过display:inline或display:table-cell吗？
这是您要找的吗？ jsfiddle.net/4UMLq/21

标签： css image positioning

【解决方案1】：

编码（任何事情）时的一般原则是保持干燥（不要重复自己）。

请看这里：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 定义，因为许多元素可能共享相同的类名。所以，如果你想让它们看起来都一样，这很容易做到。

【讨论】：

如此简单.. 感谢您的帮助并添加更多关于保持干燥的建议，太好了！我发现用表格布局很容易，但我正试图摆脱它..

【解决方案2】：

有几种方法可以做到这一点，但我认为您应该先将这些框包装在可以浮动的东西中，例如：http://jsfiddle.net/wKqnh/

HTML：

<div class="box-wrap">
    <div class="box1top">
    </div>
    <div class="box1middle">
        <p> Test </p><br />
        <p> Test </p>
    </div>
    <div class="box1bottom">
    </div>
</div>

CSS：

.box-wrap {
    float: left;
}

这有一些其他布局后果，例如，框之后的任何内容都将根据容器的大小与最后一个框的左侧对齐。

这是一篇关于基于浮动的布局的基础知识的好文章：http://www.alistapart.com/articles/css-floats-101/

【讨论】：

感谢文章的链接。会帮助我前进！