3 个并排的响应式 DIV 框 - 不在一起答案

【问题标题】：3 Responsive DIV Boxes Side by Side - Not Staying Together3 个并排的响应式 DIV 框 - 不在一起
【发布时间】：2017-03-05 07:00:17
【问题描述】：

您好，我需要帮助来解决这个问题。我有 3 个 div 需要并排放置，无论屏幕有多大或多小，但问题是，一旦屏幕的宽度低于 400 像素，最后一个 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>

【问题讨论】：

标签： html css responsive-design

【解决方案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;
}

【讨论】：

通过实现这个，我仍然看到一个问题，一切都向右。需要查看
意思是，当屏幕的宽度很小时，所有的框都应该被查看。使用您的代码后，右侧的最后一个框将无法再查看。
这行得通。请更新您的答案以显示代码，我会给您支票。谢谢

【解决方案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%;
}

【讨论】：

【解决方案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/

【讨论】：

这行得通，但仍然没有居中。他们都需要居中
没问题..虽然，框仍然没有居中。我需要它们都位于屏幕中间。我应该将它们全部包装在另一个 div 中吗？
是的，但我会改变方法......总是最好使用display:table。我添加了另一个答案...
我得到了答案。谢谢

【解决方案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;
}

FIDDLE

【讨论】：

我得到了答案。谢谢