兩個文本列和一個圖像作爲第三個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/

如何我可以嗎？ et結果如圖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

我相信你應該使用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 3

我的產品部分認爲我們可以通過將float:left應用於#tagline-content和#tagline-content-middle div並使用div來解決上述問題要麼是clear:both（在空格之後的兩個div）或overflow:hidden（向父div）清除浮動。

我們也可以使用負上邊距或設置爲絕對位置，並給予正確的和頂值把圖像在apporpriate位置（保持文章position:relative;）

Answer 4

這裏有一個搗鼓你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，所以它有些行爲有點不同於響應中的實際頁面。