我一般在WEB页面有3个区域（标题和副标题，2个文本列和测试左边和图像在右边）。我希望得到以下结果：两个文本列和一个图像作为第三个div

enter image description here

但是我不知道该怎么做了，我认为这与葡萄酒形象的z-index做，但怎么办呢？我有这样的：

enter image description here

我当前的代码是：

<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/

如何我可以吗？ et结果如图1所示？

来源

2013-09-22 cMinor

调查相对定位。 –

我相信这是你正在寻找的（jsFiddle）。我使用以下组合：

width:33.3%和float:left在您的列上。即使没有第三列，但产品图像代替了第三列，我仍将前2个设置为33.3％。
overflow:hidden关于列容器，因为列现在是浮动的，我们需要在它上面设置溢出包装#tagline div。
产品图像上的负数margin-top，以便它位于列封装上方。没有必要添加z-index。

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

来源

2013-09-25 02:36:43 doitlikejustin

我相信你应该使用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>

来源

2013-09-25 02:52:19 Josnidhin

我的产品部分认为我们可以通过将float:left应用于#tagline-content和#tagline-content-middle div并使用div来解决上述问题要么是clear:both（在空格之后的两个div）或overflow:hidden（向父div）清除浮动。

我们也可以使用负上边距或设置为绝对位置，并给予正确的和顶值把图像在apporpriate位置（保持文章position:relative;）

来源

2013-09-25 08:10:14 user2594152

请在符号中附上内嵌代码以对其进行格式化。它使得阅读更好的答案。我现在已经完成了该编辑。如有任何问题，请随时返回。 – Harry

这里有一个捣鼓你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，所以它有些行为有点不同于响应中的实际页面。

来源

2013-09-25 09:17:54 Anobik

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

CSS：

回答

相关问题