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

Question

我一般在WEB页面中有3个区域（标题和副标题，2个文本列，左侧是测试，右侧是图像）。我想得到以下结果：

但是我不知道如何制作它，我认为它与葡萄酒图像的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
}

请看一下小提琴： http://jsfiddle.net/2aEGp/1/

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

Answer 1

我相信这就是你要找的东西（jsFiddle）。我使用了以下组合：

列上的
• width:33.3%和float:left。我将前2个设置为33.3％，即使没有第三列，但产品图像取代了第三列。
列容器上的
• overflow:hidden，因为列现在是浮动的，我们需要设置包裹#tagline div的溢出。
• 产品图片上的否定margin-top，以便它超越列包装器。无需添加z-index。

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

Answer 2

这里是你的小提琴image on top

这里是css和html代码

    <header>
    <div class="inner-header">
      <h1><a title="title">titlw</a></h1>
      <h2>subtitle</h2>
        <div class='imgCont'>
           <img src="http://i.stack.imgur.com/Ava65.png" alt="Girl" />
      </div>
    </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">
    <!-- Main content area -->
    <article class="product">

      <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);
}
.imgCont{
    height:100%;
    width:30%;
    float:right;
}

#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;
    width:100%;
}

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


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

#product img {
  float: right;

}

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

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

}

我用％调整了一些设计，以便它可以得到一点响应。你可以在浏览器中尝试它，因为小提琴使用和iframe所以它在响应性方面与行为页面的行为有点不同。

Answer 3

我相信你应该使用css定位来实现这一目标。看一下下面的例子

http://jsfiddle.net/2aEGp/5/

实现这一目标的css如下：

.product img {
    position: absolute;
    right: 50px;
    top: 100px;
}

我还重新安排了像这个

的产品部分

<section id="product">
    <!-- Main content area -->
    <article class="product">
        <h3>title</h3>
        <p>Lorem Ipsum .</p>
        <img src="http://hmimexico.com/noir.png" alt="Girl" />
    </article>
</section>

Answer 4

我认为我们可以通过将float:left应用于#tagline-content和#tagline-content-middle div并使用clear:both（在空div中的两个div之后）来解决上述问题或overflow:hidden（对于父div）清除浮点数。

我们也可以使用负上边距或设置位置作为绝对位置并给出正确和最高值（保留文章position:relative;）

将图像置于适当的位置