Question

我希望将两个div并排放置，使网页具有响应性。我使用两个类似于bootstraps col-md-6的div实现它。但必须有一个更简单的方法使用class = btn。任何一种解决方案都受到欢迎。

HTML：

<div class="cont">
    <div class="btn blue"></div>
</div>
<div class="cont">
    <div class="btn red"></div>
</div>

CSS：

.cont{
     display:inline-block;
     width:50%;
     height:100px;
     background:#eee;
     padding:10px 5px;
     box-sizing:border-box;
}
.btn{
     width:100px;
     height:80px;
}
.red{
     background:red;
     float:left;
}
.blue{
     background:blue;
     float:right;
}

Answer 1

查看display: flex，例如在http://css-tricks.com/snippets/css/a-guide-to-flexbox/

我认为这正是您所寻找的。

Answer 2

试试这个：

    .cont{
     margin: 0 auto; // added
     display:inline-block;
     width:50%;
     height:100px;
     background:#eee;
     padding:10px 5px;
     box-sizing:border-box;

}

其他例子：

<div class="wrapper" style="margin: 0 auto; width: 200px">
  <div class="inner1" style="width: 100px; float:left;"></div>
  <div class="inner2" style="width: 100px; margin-left: 100px"></div>
</div>

Answer 3

这就是你的意思吗？

HTML

<div class="cont">
    <div class="btn blue"></div>
    <div class="btn red"></div>
</div>

CSS

    .cont{
        margin: 0 auto; // added from desparado
        width:50%;
        height:100px;
        background:#eee;
        padding:10px 5px;
        box-sizing:border-box;
    }

    .btn{
        width:100px;
        height:80px;
    }

    .red{
        background:red;
        float:left;
    }

    .blue{
        background:blue;
        float:right;
    }

您可以将内联块替换为内联块，并通过包装另一个容器来播放。

由于您为按钮指定了特定的宽度 - 通过设置容器的宽度并将边距宽度设置为自动，我相信您可以得到您想要的内容。

如何在单个div中放置两个元素的方法

3 个答案: