使用 css 将 Html table 行变成两个浮动 div

Question

我正在尝试将 table 转移到一组浮动 div 中，但我似乎无法获取它。如何使 .div1 和 .div2 的行为类似于 .td1 和 .td2？

已更新（还将之前的图标替换为图片以更清楚地显示问题。

Fiddle showing how it SHOULD work
table（之前）

<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
divs（之后？不工作）

<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

您好，下面给出了使用 table 和使用 div 的两个演示代码

这里是使用table

的演示代码

Dmo code using table

<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>

这里是使用div的

制作的演示代码

Demo code made using div's

<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>

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>

使用 css 将 Html table 行变成两个浮动 div

Turn Html table row into two floating divs with css

html

css

html-table

css-float