html - 如何为文本和图像图标创建具有 2 列的 div？

Question

有以下代码：

<?php foreach ($data as $vacancy) { ?>
    <div class="vacancy">
        <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/vacancy_icon.jpg" />
        <div class="name">
            <?php echo CHtml::link($vacancy['name'], array('vacancy/show', 'id'=>$vacancy->vacancy_id)); ?>
        </div>
        <div class="info">
            <div class="public_date">Public date: <?php echo $vacancy['date']; ?></div>
        </div>
        <hr />
    </div>
<?php } ?>

如您所见，每个“空缺”包含 2 列文本和一个图像。有几种风格：

.vacancy img {
    float:left;
    width: 50px
}

.vacancy .name {
    margin: 0;
    width: 50px;
}

.vacancy .info {
    float: right;
    width: 50px;
}

我需要按以下顺序显示每个空缺：图标、“名称”、“信息”，但现在看起来像这样：

我该如何解决？

更新：

现在代码是：

<?php foreach ($data as $vacancy) { ?>
    <div class="vacancy">
        <div class="img">
            <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/vacancy_icon.jpg" />
        </div>
        <div class="name">
            <?php echo CHtml::link($vacancy['name'], array('vacancy/show', 'id'=>$vacancy->vacancy_id)); ?>
        </div>
        <div class="info">
            <div class="public_date">Public date: <?php echo $vacancy['date']; ?></div>
        </div>
    </div>
<?php } ?>

CSS：

.vacancy {
    width: 100%;
}

.vacancy .img {
    float : left; 
    margin-left:10px; 
    display-inline:block;
}

.vacancy .name {
    float : left; 
    margin-left:10px; 
    display-inline:block;
}

.vacancy .info {
    float : left; 
    margin-left:10px; 
    display-inline:block;
}

答案：正确的样式：

.vacancy {
    width: 100%;
    float:left;
    display:block;
}
  .icon {
        float : left; 
        margin-left:10px; 
        }    

  .name {
        float : left; 
        margin-left:10px; 
        }

  .info {
        float : left; 
        margin-left:10px; 
        }

但现在有下一个麻烦 - 我如何垂直对齐 .name 和 .info 中的文本？

Answer 1

<?php foreach ($data as $vacancy) { ?>
<ul><li>
<div class="vacancy">
    <div class="img">
        <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/vacancy_icon.jpg" />
    </div>
    <div class="name">
        <?php echo CHtml::link($vacancy['name'], array('vacancy/show', 'id'=>$vacancy->vacancy_id)); ?>
    </div>
    <div class="info">
        <div class="public_date">Public date: <?php echo $vacancy['date']; ?></div>
    </div>
</div></li></ul>
<?php } ?>

像这样更改您的CSS：

.vacancy .info {
float : left; 
margin-left:10px; 
display:inline;}

.vacancy .name {
float : left; 
margin-left:10px; 
display:inline;}


.vacancy .img {
float : left; 
margin-left:10px; 
display:inline;}

Answer 2

如果你想全部在同一行。

  .vacancy { 
    width: 100%;
    float: left;
    display: block;
    }

 .img {
        float : left; 
        margin-left:10px; 
        display:inline;}

  .name {
        float : left; 
        margin-left:10px; 
        display:inline;}

  .info {
        float : left; 
        margin-left:10px; 
        display:inline;}