html - 位置3个div，左边一个，右边两个(上方和下方)分别

Question

如果我的问题或代码让您感到困惑，我深表歉意。我正在尝试定位 3 个 div，一个在左边，两个在右边(上方和下方)。我希望它像下图一样:

我正在使用以下代码，我可以正确显示图标，但是文本“ferrari”和 ion-checkbox 的显示方式与下面的图像不同。包含文本“Some Icons”的 div与下面的图片不一样。起初我认为这是一个简单的任务，我尝试了但无法完成这项工作。我一直被困在这个问题上。任何 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

部分图标框未显示，因为您在样式属性末尾丢失了 "。

查看 ionic 框架文档以轻松包装您的盒子:https://ionicframework.com/docs/v2/components/#grid