Question

浮动左图时我给出错误，垂直对齐不正常。我希望你能帮忙我在这里保存代码：http://www.cssdesk.com/ZH7PM

Answer 1

在您的设计中，您希望图像在右侧和左侧之间交替，对于标题p元素也是如此。

最简单的方法是使用CSS表。将#wrapper设置为使用display: table，宽度为100％。

对两个子元素display: table-cell和#left-div使用#right-div和宽度50％，然后根据需要使用nth-child选择器调整text-align属性

最后，将红色边框添加到p元素并将其视为内联块。

#wrapper {
  height: auto;
  border: 1px solid green;
  vertical-align: middle;
  font-size: 0;
  margin-bottom: 15px;
  min-height: 214px;
  display: table;
  width: 100%;
}
#wrapper img {
  max-width: 100%;
  max-height: 214px;
}
#wrapper:nth-child(2n+1) #left-div {
  text-align: left
}
#wrapper:nth-child(2n+1) #right-div {
  text-align: right;
}
#wrapper:nth-child(2n+0) #left-div {
  text-align: right;
}
#wrapper:nth-child(2n+0) #right-div {
  text-align: left;
}
#wrapper p {
  border: 1px solid red;
  display: inline-block;
  text-align: left;
}
#left-div {
  display: table-cell;
  font-size: initial;
  width: 50%;
  /* IE 7 hack */
  *zoom: 1;
  *display: inline;
  vertical-align: middle;
}
#right-div {
  display: table-cell;
  font-size: initial;
  width: 50%;
  /* IE 7 hack */
  *zoom: 1;
  *display: inline;
  vertical-align: middle;
}

<div id="wrapper">
  <div id="left-div">
    <img src="http://www.marcocerullo.com/wp-content/uploads/2014/09/01.jpg" />
  </div>
  <div id="right-div">
    <p><b>1 Streetwear donna</b>
      <br>Piccolo sottotitolo di testo
    </p>
  </div>
</div>

<div id="wrapper">
  <div id="right-div">
    <p><b>2 Streetwear donna</b>
      <br>Piccolo sottotitolo di testo
    </p>
  </div>
  <div id="left-div">
    <img src="http://www.marcocerullo.com/wp-content/uploads/2014/09/01.jpg" />
  </div>
</div>
</div>

垂直对齐div和浮动左图像

1 个答案: