Javascript 使div响应并控制文本对齐_Javascript_Jquery_Html_Css_Responsive Design

Javascript 使div响应并控制文本对齐

javascript jquery html css responsive-design

Javascript 使div响应并控制文本对齐,javascript,jquery,html,css,responsive-design,Javascript,Jquery,Html,Css,Responsive Design,我有以下布局（父div，两个子div）希望使此布局对浏览器的宽度做出响应，因此，无论何时用户更改浏览器的宽度，此布局都应占据相同的屏幕区域另外，我想在内容中间添加文本，我尝试了垂直对齐：中间，显示：表格单元格有什么建议吗这是您使用css的html解决方案 <html> <head> <title>test</title> <style> .main{ width:

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

希望使此布局对浏览器的宽度做出响应，因此，无论何时用户更改浏览器的宽度，此布局都应占据相同的屏幕区域

另外，我想在内容中间添加文本，我尝试了

垂直对齐：中间，显示：表格单元格
有什么建议吗

这是您使用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>


测验
梅因先生{
宽度：97%；
边框：1px实心#000；
高度：100px；
填充：1%；
}
苏伯恩先生{
宽度：30%；
边框：1px实心#000；
浮动：左；
高度：100px；
保证金权利：2%；
}
.subtwo{
宽度：67%；
边框：1px实心#000；
浮动：左；
高度：100px；
}
我为您创建了一个流畅的布局，带有您的div。您不需要使用媒体查询
也要用
vertical-align:middle;

你必须把
display:table; 

在父div上，并且不能在内部浮动div
你可以检查一下这个
会有帮助吗
使用diplay:table
用于父项，而显示：表单元格
用于子项。贴花是父项宽度，以百分比表示，溢出：隐藏
HTML:：
<div class="parent">
<div class="first"></div>
<div class="second"></div>
</div>

查看CSS中的媒体查询。它们允许您根据浏览器的尺寸更改css。您可以为此使用引导响应css。。。它使用@media查询，这将有助于响应设计。参考
.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;
}