CSS用於並排顯示兩個元素

Question

我正在嘗試使圖標與Bootstrap中的段落並排顯示。 如您在小提琴中看到的那樣，該圖標出現在段落上方。

這是我的標記：

<div class="row-fluid">
    <div class="span1"><p class="icon"><i class="glyphicon glyphicon-hand-right"></i></p></div>
    <div class="span11"><p class="text"><strong>Teacher Management:</strong> Here you can manage the details belongs to the teacher, by clicking the link "Teacher Management" you can view the table displaying all the teachers minimum information. The "Create New" link just above the table allow you to fill up new teacher information and the links available in the table like view, edit and delete allow you to view detailed information, to update/edit the information, to delete the information respectively.</p></div>
</div>

我想將該段落放在手形圖標的右側； 我該怎么做？

Answer 1

演示小提琴

您可以簡單地使用：

.span1{
   float:left;
}

有關來自MDN的CSS浮動的更多信息

float CSS屬性指定一個元素應從常規流中獲取，並沿其容器的左側或右側放置，其中文本和行內元素將環繞該容器。 浮點元素是浮點的計算值不為none的元素。

作為上述的補充，如果您已經在使用 Bootstrap ，只需將類pull-left添加到span1 （ Demo ），或使用xs-列（ Demo ）

Answer 2

您可以使用Bootstrap的col-xx-xx類（因為正在使用它）來執行此操作。

在這里演示

<div class="span1 col-xs-1">
<div class="span11 col-xs-11">

Bootstrap使用12列系統，因此使用1和11將使您的圖標變成1列，而文本內容將並排排列，剩下的11列。

Answer 3

如果要完美對齊，請使用表格並在頂部對齊文本

演示版

 <table id="tab">
    <tr>
        <td> div1 </td>
        <td> div2 </td>
   </tr>       
 </table>

Answer 4

您也可以使用引導帶類

<div class="row-fluid col-xs-12">
            <div class="span1 col-xs-1"><p class="icon"><i class="glyphicon glyphicon-hand-right"></i></p></div>
            <div class="span11"><p class="text"><strong>Teacher Management:</strong> Here you can manage the details belongs to the teacher, by clicking the link "Teacher Management" you can view the table displaying all the teachers minimum information. The "Create New" link just above the table allow you to fill up new teacher information and the links available in the table like view, edit and delete allow you to view detailed information, to update/edit the information, to delete the information respectively.</p></div>
</div>