放置圖像時出現問題

將我的圖像放置在文字的左側和右側2個字符時出現問題。下面是它的外觀圖片：放置圖像時出現問題

正如你所看到的圖像是向下跌破黑盒子，我希望他們每個人要它旁邊，現在頁面上的背景被延長由於圖像被進一步推低。

這裏是我的CSS代碼：

.support-text { 
    width: 600px; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    line-height: -2px; 
    margin-bottom: 130px; 
    clear: left; 

} 

.support-text h1 { 
    font-size: 30px; 
} 

.support-text { 
    font-size: 23px; 
} 

.support-img { 
    margin-top: -80px; 
    margin-bottom: 80px; 
    z-index: 1; 
} 

.ct-pic { 
    float: right; 
    width: 700px; 
    height: 596px; 
    bottom: 30px; 
    background-image: url('../img/ct.png'); 

} 

.ct-pic:hover { 
    -webkit-filter: brightness(180%); 
} 

.t-pic:hover { 
    -webkit-filter: brightness(180%); 
} 

.t-pic { 
    float: left; 
    width: 770px; 
    height: 596px; 
    margin-left: -60px; 
    margin-bottom: -1px; 
    background-image: url('../img/t.png'); 
}

這裏的HTML代碼：

<div class="main-wrapper"> 
    <section class="support-text"> 
     <img src="img/support-us.png" class="support-img"> 
     <p> hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p> 
    </section> 

    <div class="ct-pic">   
    </div> 
    <div class="t-pic"> 
    </div> 
</div>

來源

2015-03-31 erdrag

圖像默認顯示的直列（出現在同一條線路）。

修復的一種方法是刪除默認顯示爲塊的<div>（另起一行），此外您可能需要設置適當的寬度。

<div class="main-wrapper"> 
     <!--ct-pic --> 
     <img src="img/ct.png.png" class="ct-pic"> 

     <!-- blackbox --> 
     <img src="img/support-us.png" class="support-img"> 

     <!--t-pic --> 
     <img src="img/t.png.png" class="t-pic"> 
</div>

來源

2015-03-31 22:10:07

嘿，謝謝你的回覆，但圖像需要一定的火焰效果才能適應，反正有圖片向上移動，所以背景不會伸展下來，所以他們在文本框 – erdrag 2015-03-31 22:15:13

我確信有，你可以請[JSFiddle]（https://jsfiddle.net/），或提供鏈接到您的網站？ – 2015-03-31 22:18:07

jsfiddle沒有工作，但我可以盡力解釋它，因爲我可以，奧基，所以我有2個圖像，左邊的一個和右邊的一個，黑色的盒子假設是一個文本框，它的標題是標題，文本框是600像素，我的容器div是1460像素，但我不能縮小圖像，因爲這樣他們射擊的射擊效果就會消失，所以我會被剪掉需要它們與現在的尺寸相同，我需要做的唯一事情就是將它們移動起來，但我不知道如何去除延伸出來的背景，因爲按下了圖像。 – erdrag 2015-03-31 22:20:31

這樣的事情可能會奏效。您可能需要調整定位和z-indexing以獲得所需的效果，但這應該將所有元素放在正確的位置。

HTML：

<div class="main-wrapper"> 
    <section class="support-text"> 
     <img src="img/support-us.png" class="support-img"> 
     <p> hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p> 
    </section> 
</div>

CSS：

.support-img::before { 
    content: url('/img/t.png'); 
} 

.support-img::after { 
    content: url('/img/ct.png'); 
}

來源

2015-03-31 22:28:47 simpleManderson

嘿謝謝你的回覆，我試過這個，但圖片現在不顯示：/ – erdrag 2015-03-31 22:31:58

哦，我想我弄亂了你的圖像鏈接。嘗試'url（'../ img/t.png'）'等。 – simpleManderson 2015-03-31 22:36:56

是的，我做到了，但他們仍然不會出現，嗯 – erdrag 2015-03-31 22:40:58

如果你想確保你的3浮動元素會留海誓山盟身邊，你必須設定一個固定寬度的容器元素（.main-wrapper），它至少與所有元素寬度一樣大。

另一種選擇是用display: table-cell替換所有3個元素的float屬性。這可能是我使用的方法，因爲它很容易，可靠，並且不需要任何固定的寬度。

第三個選項是用display: inline-block;替換float屬性，在容器元素上設置white-space: nowrap;，並在.support-text元素上設置white-space: normal;。

第四個選項是用position: absolute;替換float屬性，然後使用top和left屬性手動設置元素的位置。

在所有這些技術中，我絕對認爲第二個是最好的。

來源

2015-04-01 00:06:52 DoctorDestructo

放置圖像時出現問題

回答

相關問題