首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >两个具有垂直对齐内div的水平对齐div

两个具有垂直对齐内div的水平对齐div
EN

Stack Overflow用户
提问于 2014-08-20 17:29:34
回答 1查看 49关注 0票数 0

我试图在这里的例子中垂直对齐第二个div。一个div中的文本可以是变化的,可以在任何地方从1-50字符.第二个div可以从4-7个字符变化,但如果一个div中的文本更大,则需要垂直对齐。

html

代码语言:javascript
复制
<div class="wrap">
    <div class="two">result</div>
    <div class="one">This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string</div>
 </div>

css

代码语言:javascript
复制
div.wrap 
{
    width: 200px;
}

div.one {
    border: 1px solid #AAAAAA;
    white-space: normal;
    word-wrap: break-word;
}
div.two {
    background-color: #7bbf7b;    
    float: right;
}

http://jsfiddle.net/mg5wpmur/

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-08-20 17:39:44

使用显示表。

举个例子!

HTML

代码语言:javascript
复制
<div class="wrap">        
    <div class="one">This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string This is a long string</div>
    <div class="two">result</div>
 </div>

CSS

代码语言:javascript
复制
div.wrap 
{
    width: 200px;
    display: table;
}

div.one {
    border: 1px solid #AAAAAA;
    white-space: normal;
    word-wrap: break-word;
    display: table-cell;
}
div.two {
    background-color: #7bbf7b;    
    display: table-cell;
    vertical-align: middle;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25410970

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档