Html 3 个并排响应的 DIV 框 - 不要呆在一起

3 Responsive DIV Boxes Side by Side - Not Staying Together

提问by CodeGodie

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

嗨，我需要帮助解决这个问题。我有 3 个 div，无论屏幕有多大或多小，都需要并排放置，但问题是，一旦屏幕的宽度低于 400px，最后一个 div 就会在其他 div 下方。我怎样才能让他们保持内联，同时响应和集中而不对媒体查询感到疯狂？请帮忙。这是一把小提琴

CSS:

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:

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>

回答by j08691

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

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

jsFiddle example

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

回答by LcSalazar

For a safer responsive layout, work with display:tableon a wrapper div, and change the box to display:table-cell. For the padding, add a middle div, and set the width in percentual value. Also, you won't even need to set the box width.

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

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

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

HTML:

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:

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

回答by LcSalazar

The problem is with your fixed margin of 10px. Change it to percent value, and adjust the width percentual also, and it will work fine.

问题在于您的固定边距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/

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

回答by Riskbreaker

Use table-cell

使用表格单元格

and have a container to be set to 100%:

并将容器设置为 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

小提琴