Question

我要做的是使HTML与此image类似。我使用table和div尝试了以下HTML。但是文字没有正确对齐。不确定什么是最好的方法。我正在使用bootstrap。

这是我尝试过的HTML。

＆＃13;

h1{
font-size:45px;
}

＆＃13;

<table>
  <tr>
    <td rowspan="2"><h1>1</h1></td>
    <td>Shopping Cart</td>
  </tr>
  <tr>
    <td>small content</td>
  </tr>
</table>

＆＃13;

Answer 1

您可以尝试使用元素来获得所需的结果。

<div class="item">
    <span class="count">1</span>
    <div class="txt">
        <h2>Shopping Cart</h2>
        <p>Manage Your Item list</p>
    </div>
    <div class="clear"></div>
</div>

<style type="text/css">
.clear {
    clear: both;
}
.count {
    float: left;
    font-size: 45px;
    width: 30px;
}
.txt {
    margin-left: 40px;
}
.txt h2,
.txt p {
    margin: 0;
}
</style>

Answer 2

＆＃13;

h1{
font-size:45px;
}
#bottom{
   vertical-align:bottom;
   }
   
#top{
   vertical-align:top;
   }
   
 td{
    padding:0;
    margin:0;
    line-height:1;
    }

＆＃13;

<table>
  <tr>
    <td rowspan="2"><h1>1</h1></td>
    <td id='bottom'>Shopping Cart</td>
  </tr>
  <tr>
    <td id='top'>small content</td>
  </tr>
</table>

＆＃13;

Answer 3

try this

<style>
.sc-col-4{
width: 33.33%;
background: #ddd;
height: 150px;
}
.left-box{
background:#007bff;
padding: 1.5rem; color: white;
padding-right: 3rem;
padding-left: 3rem;
margin-right:1.3rem;
float:left;
font-size: 50px;
}

.right-box{
  float: left;
}

</style>

<div class="sc-col-4">
<div class="left-box">1</div>
<div class="right-box">
<div style="padding-top: 1rem; font-weight:600; font-size: 1.25rem; color: #007bff;">$1.999,50</div>
<div style="color: #868e96; font-weight: 700;  font-weight: bold">INCOME</div>
</div>
</div>

Answer 4

您的代码实际上正在运行，但由于表格中每个单元格的大小，输出就像这样：

<table >
  <tr>
    <td rowspan="2"><h1>1</h1></td>
    <td style="vertical-align:bottom">Shopping Cart</td>
  </tr>
  <tr>
    <td style="vertical-align:top">small content</td>
  </tr>
</table>

Answer 5

使用上述样式的解决方案可能是最干净的。但是，如果您正在寻找纯粹位于table元素内的内容，则可以按如下方式添加嵌套h1 { font-size: 45px; }。

希望这有帮助！

＆＃13;

<table>
  <tr>
    <td rowspan="2">
      <h1>1</h1>
    </td>
    <td>
      <table cellspacing="0">
        <tr>
          <td>Shopping Cart</td>
        </tr>
        <tr>
          <td>small content</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

＆＃13;

public void cartoonBreathing(ImageView v, int inhale_time, int exhale_time){
    AnimationSet breathing_set = new AnimationSet(true);

    Animation inhale = new ScaleAnimation(1.0f,2f,1.0f,2f,
            Animation.RELATIVE_TO_SELF,0.5f,
            Animation.RELATIVE_TO_SELF,0.5f);
    inhale.setFillAfter(true);
    inhale.setDuration(inhale_time * 1000);

    Animation exhale = new ScaleAnimation(1.0f,0.5f,1.0f,0.5f,
            Animation.RELATIVE_TO_SELF,0.5f,
            Animation.RELATIVE_TO_SELF,0.5f);
    exhale.setFillAfter(true);
    exhale.setDuration(exhale_time * 1000);

    breathing_set.addAnimation(inhale);
    breathing_set.addAnimation(exhale);

    //breathing_set.setRepeatMode(Animation.RESTART); DOES NOT WORK
    //breathing_set.setRepeatMode(2); DOES NOT WORK
    //breathing_set.setRepeatCount(Animation.INFINITE);

    v.startAnimation(breathing_set);

}

＆＃13;

尝试使用rowspan对齐文本时，CSS无法正常工作

5 个答案: