3个自适应DIV框并排放置-不在一起

Question

嗨，我需要帮助弄清楚这一点。 我有3个div，无论屏幕大小是多少，都需要并排放置，但是问题是，一旦屏幕的宽度达到400px以下，最后一个div就会移到其他div之下。 我如何才能让他们保持内联，同时保持响应和集中注意力，而不会因媒体查询而发疯？ 请帮忙。 这里是一块

CSS：

.box{
    background-color: coral;
    width: 30%;    
    float:left;
    margin:10px;
    border-radius:5px;
}
.text{
    padding: 10px;
    color:white;
    font-weight:bold;
    text-align:center;
}

HTML：

<div class="box">
    <div class="text">Text</div>
</div>
<div class="box">
    <div class="text">Text</div>
</div>
<div class="box">
    <div class="text">Text</div>
</div>

Answer 1

解决此问题的一种方法是将div包装在一个容器中，并给该容器一个white-space:nowrap;text-align:center规则。 然后将div从float更改为display:inline-block; 。

jsFiddle示例

.box {
    background-color: coral;
    width: 30%;
    display:inline-block;
    margin:10px 0;
    border-radius:5px;
}
.text {
    padding: 10px 0;
    color:white;
    font-weight:bold;
    text-align:center;
}
#container {
    white-space:nowrap;
    text-align:center;
}

Answer 2

为了获得更安全的响应式布局，请在包装div上使用display:table ，然后将框更改为display:table-cell 。 对于填充，添加中间div，然后以百分比值设置宽度。 另外，您甚至不需要设置框的宽度。

http://jsfiddle.net/32hcm/9/

HTML：

<div class="wrapper">
    <div class="box">
        <div class="text">Text</div>
    </div>
    <div class="middle"></div>
    <div class="box">
        <div class="text">Text</div>
    </div>
    <div class="middle"></div>
    <div class="box">
        <div class="text">Text</div>
    </div>
</div>

CSS：

.box{
    background-color: coral;
    display: table-cell;
    border-radius:5px;
}
.text{
    color:white;
    font-weight:bold;
    text-align:center;
    padding: 10px 0;
}

.wrapper {
    display: table;
    width: 100%;
}

.middle {
    display: table-cell;
    width: 10%;
}

Answer 3

问题是您的固定边距为10px 。 将其更改为百分比值，然后也调整百分比宽度，它将正常工作。

.box{
    background-color: coral;
    width: 28%;    
    float:left;
    margin:1%;
    border-radius:5px;
}
.text{
    padding: 10px 0;
    color:white;
    font-weight:bold;
    text-align:center;
}

http://jsfiddle.net/32hcm/5/

Answer 4

使用表格单元

并将容器设置为100％：

.core {width: 100%; display: table; border-spacing: 10px;}

.box{
    background-color: coral;
    width: 32.03125%; 
    float:none;
    display: table-cell;
    border-radius:5px;
}

小提琴