3响应DIV框并排 - 不在一起 [英] 3 Responsive DIV Boxes Side by Side - Not Staying Together

问题描述

您好，我需要帮助想出来。我有3个div，需要保持并排，无论屏幕是多大还是小，但问题是，一旦屏幕的宽度达到低于400px，那么最后一个div在其他。我如何使他们保持内联，同时响应和中心，而不会疯狂的媒体查询？请帮忙。 这里有一个FIDDLE

Hi i need help figuring this out. I have 3 divs that need to stay side by side regardless of how big or small the screen is, but the problem is that, once the screen's width reaches below 400px, then the last div goes under the others. How can I make them stay inline and at the same time responsive and centered without getting crazy with media queries? Please help. 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>

推荐答案

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

One way to fix this would be to wrap the divs in a container, and give that container a white-space:nowrap;text-align:center rule. Then change the divs from floating to display:inline-block;.

jsFiddle示例

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

这篇关于3响应DIV框并排 - 不在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！