html - 3 个响应式 DIV 框并排 - 不在一起

Question

您好，我需要帮助解决这个问题。无论屏幕有多大或多小，我有 3 个 div 需要并排放置，但问题是，一旦屏幕的宽度低于 400px，最后一个 div 就会位于其他 div 之下。我怎样才能使它们保持内联，同时保持响应和居中，而不会对媒体查询感到疯狂？请帮忙。 <强> HERE'S A FIDDLE

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 example

.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;
}