放置图像时出现问题

将我的图像放置在文字的左侧和右侧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

放置图像时出现问题

回答

相关问题