0

我在 jsfiddle 中抛出了一个简单的示例来向您展示正在发生的事情，然后我将解释我想要实现的目标..

http://jsfiddle.net/4UMLq/20/

（代码 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 个图像）

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

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

谢谢，卡洛斯

4

2 回答 2

2

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

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

于 2012-10-24T22:26:14.410 回答
0

有几种方法可以做到这一点，但我认为您首先要将这些框包装在您可以浮动的东西中，例如：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/

于 2012-10-24T22:25:30.297 回答