难以将元素与引导程序对齐

时间:2013-03-02 15:40:06

标签: html css twitter-bootstrap

使用CSS / HTML属性时遇到一些困难。我正在使用bootstrap来获得良好的渲染效果。

所以我想拥有这个: enter image description here

img很完美,但问题出在日期(02.03.2013)。我在img上放了一个浮子,所以h3工作得很好但不是日期。

你能帮帮我吗?这就是我所拥有的:http://jsbin.com/uqadoc/1/edit

1 个答案:

答案 0 :(得分:1)

<h3><p>(您的约会对象)周围放置一个div 使H3具有固定宽度,并且浮动:左; 和p,float:right;

注意:我已经在jf中使用了非div apreach但同样的概念

  <div class='main'>
    <img src='' class='ims'>
       <div class='content'>

           <h3 class="qwe" >serwqerqwrewqr</h3>



           <p class="wer">dafdf</p>
          <div class="rty" >


               sfdg
               ffffffffffffffffffffff
           fdsffffffffffff</br>


          sfdg
               ffffffffffffffffffffff
           fdsffffffffffff</br>          sfdg
               ffffffffffffffffffffff
           fdsffffffffffff</br>          sfdg
               ffffffffffffffffffffff
           fdsffffffffffff</br>
</div>
</div> 
</div>


.main{
    width:500px;
    height:200px;
    background:black;
}
.content{
    width:100ps;
    height:200px;
    background:red;
}
.ims{
    float:left;
    width:100px;
    height:200px;
    background:blue;
}
    .qwe{
        float:left;
    width:300px
        height:50px;
    }

    .wer{

    width:200px
        height:50px;
        float:right;      
    }
 .rty{
padding-top:80px;
    width:400px
        float:right;      
    }

Jfiddle http://jsfiddle.net/qAEzr/