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

小提琴