时间戳

首页 > 解决方案 > 在离子 HTML 中将 div 定位在另一个 div 的右侧

html - 在离子 HTML 中将 div 定位在另一个 div 的右侧

问题描述

我想将一个 ID 为“first”的 div 放置在另一个 ID 为“second”的 div 的右侧，该怎么做？

 <ion-col>
         <div id="second">
          <ion-img src="./assets/images/from_to.svg" style="height:30%;width:10%;"></ion-img>
         </div>
        <div id="first">
        <ion-label>Domicile</ion-label>
        <ion-label >120 Square de la Couronne,Paris</ion-label>
        </div>
 </ion-col>

标签： htmlcssionic-framework

解决方案

首先，我建议你减少对基本 html 的使用，例如，尝试使用而不是 . 其次，您几乎从不将 id 与 html 标签一起使用。现在回答你的问题，多一点代码会有所帮助，但这里有一个解决方案：

HTML：

    <ion-col>
  <ion-item class="second">
    <ion-image class="img" src="/assets/images/from_to.svg" />
  </ion-item>
  <ion-item class="first">
    <ion-label>Domicile</ion-label>
    <ion-label>120 Square de la Couronne,Paris</ion-label>
  </ion-item>
</ion-col>

CSS：

.first{
float: right;
}
.second{
float:left;
}

我假设您已经知道“HTML”进入了您的 x.page.html，而“CSS”进入了同一文件夹的 x.page.scss。

推荐阅读