html - 两个文本列和一个图像作为 div 的第三个

Question

我在网页中通常有 3 个区域(标题和副标题、2 个文本列和左侧的测试以及右侧的图像)。我想得到以下结果:

不过我不知道怎么弄，我觉得跟wine image的z-index有关，但是怎么弄呢？ 我有这个:

我当前的代码是:

<header>
    <div class="inner-header">
      <h1><a title="title">titlw</a></h1>
      <h2>subtitle</h2>
    </div>
  </header>
  <section id="tagline">
    <div id="tagline-content">column 1 and its text.</div>
    <div id="tagline-content-middle">column 2 and its text.</div>
  </section>
  <section id="product">
     <article class="product">
      <img src="http://hmimexico.com/noir.png" alt="Girl" />
      <h3>title</h3>
      <p>Lorem Ipsum .</p>

    </article>
  </section>

CSS:

header {
  margin-top: -40px;
  height: 165px;
}

header .inner-header {
  height:165px;
  text-align:center;
}

header h1{
  padding-top: 45px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  margin-bottom:0;
}



header h2 {
  color:#111111;
  font-size: 19px;
  line-height: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top:-2px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15);
  text-transform:uppercase
}

#tagline {
  padding: 10px 0 10px 0;
  background:#111 ;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}

#close-open-top {
  margin: -9px auto;
  text-align: center;
  width: 50px;
}

#close-open-top a {
  width:100px
}

#close-open-top:hover {
  margin-top:-11px;
  padding-bottom:2px
}

#tagline-content {
  color: #FFFFFF;
  text-align:left;  
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 100px;
  text-transform: uppercase;
}

#tagline-content-middle {
  color: #FFFFFF;
  text-align:center;  
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 100px;
  text-transform: uppercase;
}


#product {
  text-align:center;
  margin:16px auto;
  padding-top:10px;
  width:960px;
}

#product img {
  float: right;
  margin-left: 15px;
}

.product {
  width:100%;
  display:block;
  margin:0;
  text-align:left;
}

.product p {
  color: #4F4F4F;
  font-size: 16px;
  line-height: 21px;
  margin-bottom:38px
}

请看一下 fiddle : http://jsfiddle.net/2aEGp/1/

如何得到如图 1 所示的结果？

Answer 1

我相信这就是您要找的 ( jsFiddle )。我使用了以下组合:

• width:33.3% 和 float:left 在您的列上。我将前 2 设置为 33.3%，即使没有第三列，但产品图片代替了第三列。
• overflow:hidden 在列容器上，因为列现在是 float 的，我们需要在其上设置 overflow 包装 #tagline div。
• 产品图像上的负 margin-top，使其位于列包装器之上。无需添加 z-index。

您也可以view the jsFiddle fullscreen看看它在浏览器窗口中的样子。