我试图将多个div彼此对齐,由于某种原因其不起作用。我正在使用一个简单的引导模板...我的代码段在下面,我的JS小提琴在http://jsfiddle.net/sean3200/yU3TA/谢谢!

     I basically want my html to look like align such as:
     Album1: Name1
     Album2: Name2

    <div id="wellbox" class="well pull-right">
        <div><h3>Album Sales & Net worth</h3></div>
           <hr>
        <a href="#"><p id="album0">Album1:</p></a>
             <div><p id="albumdata0" class="album-class">Name1</p></div>

        <a  href="#"><p id="album1">Album2:</p></a>
             <div><p id="albumdata1" class="album-class"></p>Name2</div>

        <a  href="#"><p id="album2">Album3:</p></a>
             <div><p id="albumdata2"  class="album-class">Name3</p></div>

        <a  href="#"><p id="album3">Album3:</p></a>
             <div><p id="albumdata3" class="album-class"></p></div>
    </div>

最佳答案

我可能会这样重组:

<div id="wellbox" class="well pull-right">
    <div><h3>Album Sales & Net worth</h3></div>
       <hr>
    <div class'albumContainer'>
        <a href="#"><p id="album0">Album1:</p></a>
        <div><p id="albumdata0" class="album-class">Name1</p></div>
    </div>
</div>


然后添加以下样式:

.albumContainer{
    clear: both;
}
.albumContainer a, .albumContainer div{
    display: inline-block;
}

关于css - 如何使用 bootstrap 对齐CSS类,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16949379/

10-17 02:04