0

次のコードがあります。

<?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 つの列と 1 つの画像が含まれています。いくつかのスタイルがあります:

.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 のテキストを垂直方向に揃えるにはどうすればよいですか?

4

2 に答える 2

2 
<?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;}
于 2013-04-25T09:50:19.187 に答える