Question

如果我的问题或代码让您感到困惑，我感到非常抱歉。我试图定位3个div，一个在左边，两个在右边（上面和下面）。我希望它像下图：

我正在使用以下代码，并且我可以正确显示图标，但文本“ferrari”和ion-checkbox的显示方式与下面附带的图像类似。而div包含文本'Some Icons'与下面的图片没有相似之处。起初我认为这是一项简单的任务，我尝试过但是无法完成这项工作。我一直坚持这一点。任何CSS专家都可以帮助我吗？

<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
  <script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>

<div class="container" style="width:25%;height:25%;display:inline-block;">
  
  <img style="width: 100%;
    height: auto;" src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg " />
</div>

<div style="width:75%;height:25%;display:inline-block;">
  <b style="width:100%;height:50%;">Ferrari</b>
  
  <!-- Will display some icons in it later-->
  <div style="width:100%;height:50%;">Some Icons</div>
</div>

<div style="height:25%;width:75%;">
  <ion-checkbox>
    Please check me and ETC. !!!
  </ion-checkbox>
</div>

Answer 1

由于您在样式属性的末尾丢失了"，因此不显示某些图标框。

查看离子框架文档以便轻松包装：https://ionicframework.com/docs/v2/components/#grid

Answer 2

您可以使用float将div并排对齐。使用display: inline-block;后面会有一些额外的小空间，因此使用精确的宽度将无效。如果要使用inline-block属性实现它，则需要删除该空间。这篇文章解释了如何做到这一点。 https://css-tricks.com/fighting-the-space-between-inline-block-elements/

或者您可以使用float。您需要清除我使用clearfix css完成的浮动。

.clearfix:after {
  display: table;
  content: "";
  clear: both;
}

<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>

<div class="container clearfix" style="width:25%;height:25%;float:left;">

  <img style="width: 100%;
    height: auto;" src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg " />
</div>

<div class="clearfix" style="width:75%;height:25%;float:left;">
  <b style="width:100%;height:50%;">Ferrari</b>

  <!-- Will display some icons in it later-->
  <div style="width:100%;height:50%;">Some Icons</div>
</div>

<div style="height:25%;width:75%;">
  <ion-checkbox>
    Please check me and ETC. !!!
  </ion-checkbox>
</div>

Answer 3

您应该在构建的网格系统中使用Ionic，方法是将row指定为容器，并在该行中定义列。你可以这样做..

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content >
      <div class="row">
      <div class= "item item-image col col-25">
        <img src="https://s10.postimg.org/ar28d6cad/evc03r304.jpg">
      </div>
      <div class= "list col col-75">
       <div class="item item-text-wrap">
       some text here
      </div>
         <ion-checkbox class="item item-text-wrap item-checkbox-right">
         othet text here
      </ion-checkbox>
      </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

默认情况下，您需要删除行和列所具有的填充。

/* Styles here */
.row,
.col{
  padding:0;
}

工作示例http://play.ionic.io/app/296ddd83faf9

位置3个div，一个在左侧，两个在右侧（上方和下方）

3 个答案: