css - 两个箱子并排-6ren

css - 两个箱子并排

转载作者：太空宇宙更新时间：2023-11-04 04:52:57

24

4

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

但是我想在浏览器窗口中并排显示这些元素，而不是一个一个地显示。我已经尝试过 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/

24

4

0

文章推荐： c - 删除二叉搜索树的叶节点 - segmentation fault

文章推荐： c - 说服编译器在循环外设置寄存器

文章推荐： objective-c - objc_msgSend 15 崩溃

algorithm - 容量为 y、x*y 项目的 x 箱子，最大化总分，其中每个(项目，箱子)对都有一个相关联的分数
x bins, each with capacity y x*y items each (item, bin) pair has an associated score 在给定上述标准的情况下，是否有
rust - 我如何使用 `rustc` 箱子？
我正在尝试在我的程序中使用 rustc crate。 #[macro_use] extern crate rustc; extern crate rustc_typeck; extern crate
rust - 如何配置 SublimeLinter-contrib-rustc 以找到 "piston"箱子？
我正在使用 Piston 构建 Rust 游戏，我正在尝试使用 SublimeLinter Rust package .当我打开 .rs 游戏文件时，出现以下 linter 错误: extern cr

首页

博学

6Ren·AI

商城

css - 两个箱子并排