Question

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

在上面的例子中，bg颜色将是包含文本的框的图像（分成3个图像）

但是我想在浏览器窗口中并排显示这些并不是在另一个之下..我已经尝试过浮动元素等等，我似乎无法正确使用它？

有没有人有任何想法？任何帮助表示赞赏

谢谢，卡洛斯

Answer 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都嵌套在“box”div中。没有理由创建重复的boxNtop等CSS定义，因为许多元素可能共享相同的类名。所以，如果你希望它们看起来都一样，那就很容易了。

Answer 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/

两个盒子并排

2 个答案: