根据左DIV高度垂直对齐右DIV

根据红DIV的高度，垂直对齐我的列表项目（原因1，原因2等）的最佳方式是什么（红色DIV的高度被驱动由左边大文本的大小决定）而不给DIV的固定高度？我试图display:inline-block + vertical-align:middle但没有成功http://jsfiddle.net/ggfcN/1/根据左DIV高度垂直对齐右DIV

enter image description here

HTML

<div class="wrapper"> 
<div class="block-left bigtext">Pouquoi<br>faire appel<br> à nos services?</div> 
<div class="block-right"><ul class="bullets1-alt"> 
     <li><i class="fa fa-check"></i> Reason 1</li> 
     <li><i class="fa fa-check"></i> Reason 2</li> 
     <li><i class="fa fa-check"></i> Reason 3</li> 
     </ul> 
</div> 
</div>

CSS：当您使用箱大小

.bullets1-alt li { 
    margin-bottom: 3px; 
    margin-left: 30px; 
    padding: 0px; 
    color: #333; 
    list-style-type: none; 
    font-weight: 300; 
    font-size: 14px; 
} 

.bigtext { 
    color: #124191; 
    font-weight: 600; 
    font-size: 53px; 
    text-align: right; 
    line-height: 53px; 
    padding-top: 30px; 
    padding-bottom: 30px; 
} 

.wrapper { 
    position: relative; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    width: 980px; 
    overflow: hidden; 
    background: red; 

} 

.block-left { 
    float: left; 
    box-sizing: border-box; 
    padding-right: 20px; 
    width: 50%; 

} 
.block-right { 
    float: right; 
    overflow: hidden; 
    box-sizing: border-box; 
    width: 50%; 
}

来源

2013-12-21 Greg

写：

.block-left, .block-right { 
    display:table-cell; 
    vertical-align:middle; 
    padding:30px 0; 
    height:100%; 
} 
.wrapper { 
    display:table; 
}

从.block-right和float:left从.block-left

Updated fiddle here.

来源

2013-12-21 18:27:37 Hiral

非常感谢。这个工作，但我仍然希望能够水平放置右边的DIV到容器（包装）的最右边，并把DIV留在容器（包装）的最左边。有没有办法做到这一点？在您的解决方案中，两个DIV都水平对齐到包装的中心。再次感谢您的帮助 – Greg

@Greg欢迎:)你想[这样的事情??]（http://jsfiddle.net/ggfcN/5/） – Hiral

不完全，但我认为这是值得一个新的和单独的问题。你已经解决了我的第一个问题，非常感谢！ – Greg

你仍然需要一些浏览器供应商前缀：

.block-left { 
    float: left; 
    -moz-box-sizing:border-box; 
    box-sizing: border-box; 
    padding-right: 20px; 
    width: 50%; 

}

来源

2013-12-21 18:27:29

删除float:right您可以使用inline-block的，但首先你需要删除浮动

http://jsfiddle.net/ggfcN/4/

<div class="wrapper"> 
    <div class="block block-left bigtext"> 
     Pouquoi<br>faire appel<br> à nos services? 
    </div><div class="block block-right"><ul class="bullets1-alt"> 
      <li><i class="fa fa-check"></i> Reason 1</li> 
      <li><i class="fa fa-check"></i> Reason 2</li> 
      <li><i class="fa fa-check"></i> Reason 3</li> 
      </ul> 
    </div> 
</div>

.bullets1-alt li { 
    margin-bottom: 3px; 
    margin-left: 30px; 
    padding: 0px; 
    color: #333; 
    list-style-type: none; 
    font-weight: 300; 
    font-size: 14px; 
} 

.bigtext { 
    color: #124191; 
    font-weight: 600; 
    font-size: 53px; 
    text-align: right; 
    line-height: 53px; 
    padding-top: 30px; 
    padding-bottom: 30px; 
} 

.wrapper { 
    position: relative; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    width: 980px; 
    overflow: hidden; 
    background: red; 

} 

.block { 
    vertical-align: middle; 
    display: inline-block; 
    overflow: hidden; 
    box-sizing: border-box; 
    width: 50%; 
}

来源

2013-12-21 18:33:04 South

根据左DIV高度垂直对齐右DIV

回答

相关问题