div内的图像定位网格

Question

我正在尝试创建一个由四个图像组成的正方形网格，并将它们放置在一些标题文本的右侧，这些标题文本已经居中。

现在我创建了一个plnkr，这是一个非常糟糕的尝试-请原谅我，但我的CSS技能几乎不存在。HTML是:

<div class="header">Square To My Right Please!
  <span>
    <div>
      <span><img src="images/1.gif"></span>
      <span><img src="images/1.gif"></span>
    </div>
    <div>
      <span><img src="images/1.gif"></span>
      <span><img src="images/1.gif"></span>
    </div>
  </span>
</div>

这确实得到了我想要的图像的一般盒子网格，但它把它们放在标题文本下面，而不是仅仅在右边。我想当我把东西在它将放置内联，而不是在一个新的行?

标题的css格式为:

.header {
  text-align: center;
}

plnkr在这里:http://plnkr.co/edit/9UPppkLcJDd9URgOC8JO

Answer 1

您不能将像<div>这样的块级元素封装在像<span>这样的内联元素中。这就像你把一个盒子放在液体里，而不是液体放在盒子里。但无论如何，给span一个float: right。

span {float: right;}

<div class="header">
  Square To My Right Please!
  <span>
    <div>
      <span><img src="images/1.gif"></span>
      <span><img src="images/1.gif"></span>
    </div>
    <div>
      <span><img src="images/1.gif"></span>
      <span><img src="images/1.gif"></span>
    </div>
  </span>
</div>

或者第二个是display: inline-block;:

span {display: inline-block;}

<div class="header">
  Square To My Right Please!
  <span>
    <div>
      <span><img src="images/1.gif"></span>
      <span><img src="images/1.gif"></span>
    </div>
    <div>
      <span><img src="images/1.gif"></span>
      <span><img src="images/1.gif"></span>
    </div>
  </span>
</div>

如果你想居中，给vertical-align: middle。

span {display: inline-block; vertical-align: middle;}

<div class="header">
  Square To My Right Please!
  <span>
    <div>
      <span><img src="images/1.gif"></span>
      <span><img src="images/1.gif"></span>
    </div>
    <div>
      <span><img src="images/1.gif"></span>
      <span><img src="images/1.gif"></span>
    </div>
  </span>
</div>

Answer 2

我认为你也需要改变你的标记结构，在span

里面写div不是好的做法

.floatL {
  float: left;
}
.header {
  float: left;
  width: 100%;
}

<div class="header">
<div class="floatL"><span>Square To My Right Please!</span></div>
  <div class="floatL">
    <div>
      <span><img src="images/1.gif"></span>
      <span><img src="images/1.gif"></span>
    </div>
    <div>
      <span><img src="images/1.gif"></span>
      <span><img src="images/1.gif"></span>
    </div>
  </div>
</div>

Answer 3

这个怎么样http://plnkr.co/edit/wOukuoOFssqrJoX0mxqr?p=preview

HTML

<div class="header">
  <div class="left">Square To My Right Please!</div>
  <div class="right">
        <span><img src="images/1.gif"></span>
        <span><img src="images/1.gif"></span>
        <span><img src="images/1.gif"></span>
        <span><img src="images/1.gif"></span>
  </div>
</div>

Css

.left {
  float: left;
}
.right {
  float: right;
}
.right span img {
  display: inline-block;
}