html - 两个文本列和一个图像作为第三个 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在列容器上，由于列现在是浮动的，我们需要在其上设置溢出来包装#taglinediv。
• 产品图片上的负片margin-top，使其位于列包装器上方。无需添加z-index.

您还可以全屏查看 jsFiddle以查看它在浏览器窗口中的外观。

Answer 2

这是你的小提琴图像在上面

这是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;

}

我用 % 调整了一些设计，以便它可以有点响应。您可以在浏览器中尝试它，因为 fiddle 使用和 iframe，因此它在响应性方面的行为与 atual 页面略有不同。

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:leftdiv并使用（在空 div 中的两个 div 之后）或（到父 div）来清除浮动来解决上述问题。#tagline-content#tagline-content-middleclear:bothoverflow:hidden

我们还可以使用负上边距或将位置设置为绝对值并给出右值和上值（保留文章position:relative;）将图像放置在适当的位置