使 div 响应并控制文本对齐答案

【问题标题】：Make div responsive and control text alignment使 div 响应并控制文本对齐
【发布时间】：2013-08-24 18:35:54
【问题描述】：

我有以下布局（父 div，两个子 div）

想让这个布局响应浏览器的宽度，所以只要用户改变浏览器的宽度，这个布局就应该占据屏幕的相同区域

另外，我想在内容中间加上文字，我试过vertical-align: middle;，display: table-cell;

有什么建议吗？

Markup here

【问题讨论】：

查看 CSS 中的媒体查询。它们允许您根据浏览器的尺寸更改 CSS。
您可以为此使用引导响应 css...它使用有助于响应式设计的 @media 查询。参考keenthemes.com/preview

标签： javascript jquery html css responsive-design

【解决方案1】：

这是您使用 css 的解决方案 html

<html>
    <head>
        <title>test</title>
        <style>
    .main{
        width:97%;
        border:1px solid #000;
        height:100px;
        padding:1%;
    }
    .subone{
        width:30%;
        border:1px solid #000;
        float:left;
        height:100px;
        margin-right:2%;
    }
    .subtwo{
        width:67%;
        border:1px solid #000;
        float:left;
        height:100px;
    }
        </style>
    </head>
    <body>
       <div class="main">
       <div class="subone">
       </div>
       <div class="subtwo">
       </div>
       </div>
    </body>
    </html>

【讨论】：

【解决方案2】：

我用你的 div 为你创建了一个流畅的布局。您不需要使用媒体查询。

也可以使用

vertical-align:middle;

你必须放

display:table;

在父 div 上，你不能在里面浮动 div。

你可以查看这个example

【讨论】：

【解决方案3】：

有用吗？？？

将diplay:table; 用于父级，display:table-cell 用于子级..decalare 父级宽度百分比，溢出：隐藏；

HTML::

<div class="parent">
<div class="first"></div>
<div class="second"></div>
</div>

CSS ::

.parent{
display:table;
width:80%;
border-spacing:4px;
border:2px solid black;
overflow:hidden;
}
.first{
text-align:center;
display:table-cell;
border:2px solid black;
width:100px;
height:200px;
}
.second{
text-align:center;
display:table-cell;
border:2px solid black;
height:200px;
}

FIDDLE

【讨论】：