Question

我正在尝试将一个表转移到一组浮动div中，我似乎无法得到它。如何使.div1和.div2表现得像.td1和.td2？

更新（也替换了带图片的先前图标以更清楚地显示问题。

<table>

<img src="http://placehold.it/60x60">
</td>
<td class="td2"  style="padding-left: 8px">
  <h4>
    <strong>
      Title 
    </strong>
   </h4>
      <span>
            Here is come placeholder Text
      </span>

</td>

Fiddle showing how it doesn't work with divs
div（之后？不工作）

<div class="div_wrapper" style="display:inline-block">
<div  class="div1" style="width: 62px; vertical-align: top; padding-top:5px">

<img src="http://placehold.it/60x60">
</div>
<div class="div2" style="padding-left: 8px">
  <h4>
    <strong>
      Title 
    </strong>
   </h4>
      <span>
            Here is come placeholder Text
      </span>

</div>

Answer 1

您可以使用边距来对齐文字： -

<div class="form-group" style="display:inline-block">
    <div  class="div1" style="width: 33px; vertical-align: top; padding-top:5px">

    <i class="fa fa-cog" style="font-size: 36px"></i>
    </div>
    <div class="div2" style="padding-left: 8px">
      <h4>
        <strong style="margin-left:30px;">
          Title 
        </strong>
       </h4>
        <br/>
          <span style="margin-left:30px;">
                Here is come placeholder Text
          </span>

    </div>
</div>
</div>

Answer 2

下面给出了使用表并使用div的两个演示代码

这是使用表格的演示代码

Dmo code using table

＆＃13;

<table>
  <tr>
    <td class="td1" width= "33" style="vertical-align: top; padding-top:5px">

    <i class="fa fa-cog " style="font-size: 36px"></i>
    </td>
    <td class="td2"  style="padding-left: 8px">
      <h4>
        <strong>
          Title 
        </strong>
       </h4>
        <br/>
          <span>
                Here is come placeholder Text
          </span>

    </td>
</tr>
</table>

＆＃13;

这是使用div＆＃39>制作的演示代码

Demo code made using div's

＆＃13;

<div class="form-group" style="display:inline-block">
    <div  class="div1" style="width: 33px; vertical-align: top; padding-top:13px">

    <i class="fa fa-cog" style="font-size: 36px"></i>
    </div>
<div class="table_wrapper_div">
    <div class="div2" style="padding-left: 53px;">
        <h4><strong>Title</strong></h4><br/>
        <span>Here is come placeholder Text</span>
    </div>
</div>

＆＃13;

Answer 3

在这种情况下，您可以使用float。

http://jsfiddle.net/n69aro2x/1/

以下是代码： -

<div class="div_wrapper" style="display:inline-block">
    <div  class="div1" style="width: 62px; vertical-align: top; padding-top:5px; float:left">

    <img src="http://placehold.it/60x60">
    </div>
    <div class="div2" style="padding-left: 8px; float:left;">
      <h4>
        <strong>
          Title 
        </strong>
       </h4>
          <span>
                Here is come placeholder Text
          </span>

    </div>
</div>
</div>

将Html表行转换为两个带有css的浮动div

3 个答案: