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

我认为你也需要改变你的标记结构，在div内写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;
}

在div

3 个答案: