Question

我需要帮助解决这个问题。我有3个div需要并排放置，无论屏幕有多大或多小，但问题是，一旦屏幕宽度达到400px以下，那么最后一个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从浮动更改为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;
}

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

使用 table-cell

并将容器设置为100％：

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

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

<强> FIDDLE

3个并排的响应式DIV盒 - 不要在一起

4 个答案: