如何根据CSS的相对位置删除空格？ [英] How do I remove white space due to position relative of CSS?

问题描述

嗨！我想创建一个网站，在左侧显示产品图像，在右侧显示规格或功能。我已经尝试使用位置相对而且它完成了工作。但唯一的问题是当我将它移到图像旁边时，它有一个很大的空白空间，它来自哪里，我不知道如何删除它。请分享您对此的了解，并随时提出新的技巧以改进我的脚本。



我在下面提供了一个小脚本，类似于我正在尝试的网站构建以便于分析。



我尝试过：



< pre lang =HTML>以下是main.html的代码：

< pre lang = HTML > & lt; html>
& lt; head>
& lt; title> TEST& lt; / title>
< link < span class =code-attribute> rel = stylesheet href = styles.css / >
& lt; / head>

& lt; body>
< div < span class =code-attribute> id = wrapper >
< div id = imageStyle >
< img src = 音乐商店/ img / Ibanez Guitars / ibanezM8MStandingPosition.png / >
< / div >

< div id = featuresStyle >
< h2 < span class =code-keyword>> 名称：Ibanez M8M < / h2 >
< br / >
< h2 > 价格： $ 30000 < / h2 >
< br / >
< h2 > 描述：Good Guitar！< / h2 > ;
< br / >
< h2 > 颈部类型：Bla Bla Bla < / h2 >
< br / >
< h2 > 正文：Bla Bla Bla < / h2 >
< br / >
< h2 > ; 指板：Bla Bla Bla < / h2 >
< br / >
< h2 > Bridge：Bla Bla Bla < / h2 >
< br / >
< h2 > 颈部提货：Bla Bla Bla < span class =code-keyword>< / h2 >
< br / >
< h2 > Bridge Pickup：Bla Bla Bla < / h2 >
< br / >
< h2 > 硬件颜色：Bla Bla Bla < / h2 >
< br / >
< / div >
< span class =code-keyword>< / div >
& lt; / body>

& lt; / html> < / pre >


这里是styles.css：

< pre lang = CSS > ＃包装
{
border：1px solid black;
宽度：65％;
}

#imageStyle
{
margin-left：60px;
}

#featuresStyle
{
position：relative;剩余
：480px;
底部：870px;
} < / pre >

解决方案

30000 < / h2 >
< br / >
< h2 > 描述：Good Guitar！< / h2 >
< br / >
< h2 > 颈部类型：Bla Bla Bla < / h2 >
< br / < span class =code-keyword>>
< h2 > 正文：Bla Bla Bla < / h2 >
< br / >
< h2 > 指板：Bla Bla Bla < / h2 >
< br / >
< h2 > Bridge ：Bla Bla Bla < / h2 >
< br / >
< h2 > ; 颈部拾取：Bla Bla Bla < / h2 >
< br / >
< h2 > 桥接取件： Bla Bla Bla < / h2 >
< br / >
< h2 > 硬件颜色：Bla Bla Bla < / h2 >
< br / >
< / div >
< / div >
& lt ; /体>

& lt; / html> < / pre >


这里是styles.css：

< pre lang = CSS > ＃包装
{
border：1px solid black;
宽度：65％;
}

#imageStyle
{
margin-left：60px;
}

#featuresStyle
{
position：relative;剩余
：480px;
底部：870px;
} < / pre >

我将向您展示自己找到答案的方向：

1.如果您使用的是HTML5，你应该，不要用斜线，例如

< br> 

只是

< br> 

将会这样做。

2.为什么你使用h2标签作为特征文本？我认为p标签应该足够了。

3.你问为什么图像和特征文本之间存在差距，因为它是这样说的：

＃ featuresStyle  
 {
  position  ：  relative;  
  left  ：  480px;  

如果有疑问，谷歌会发现这些效果CSS属性。

4.如果你想并排放置div，请尝试 float 或 display：inline-block ，向Google询问示例。

5.最外层的div #wrapper 设置为65％，是否有足够的宽度可以并排显示图像及其特征文本吗？

6.我建议你学好CSS的盒子模型和位置。

Hi! I wanted to create a website that will display the image of the product on the left and the specs or features on the right. I've tried using position relative and it does the job done.But the only problem is when i've shifted it beside the image, it has a big white empty space from where it came from and I don't know how to remove it. Please share your knowledge about this and feel free to suggest new techniques to better my script.

I provided a small script below that resembles the website that I'm trying to build for easier analysis.

What I have tried:

Here is the code for main.html:

<pre lang="HTML">&lt;html>
	&lt;head>
		&lt;title>TEST&lt;/title>
		<link rel="stylesheet" href="styles.css" />
	&lt;/head>
	
	&lt;body>
		<div id="wrapper">
             <div id="imageStyle">
                <img src="Music Store/img/Ibanez Guitars/ibanezM8MStandingPosition.png" />
             </div>

             <div id="featuresStyle">
                 <h2>Name: Ibanez M8M</h2>
                 <br/>
                 <h2>Price: $30000</h2>
                 <br/>
                 <h2>Description: Good Guitar!</h2>
                 <br/>
                 <h2>Neck Type: Bla Bla Bla</h2>
                 <br/>
				 <h2>Body: Bla Bla Bla</h2>
                 <br/>
                 <h2>Fretboard: Bla Bla Bla</h2>
                 <br/>
                 <h2>Bridge: Bla Bla Bla</h2>
                 <br/>
                 <h2>Neck Pickup: Bla Bla Bla</h2>
                 <br/>
                 <h2>Bridge Pickup: Bla Bla Bla</h2>
                 <br/>
                 <h2>Hardware Color: Bla Bla Bla</h2>
                 <br/>
		     </div>
        </div>
	&lt;/body>

&lt;/html></pre>


and here is the styles.css:

<pre lang="CSS">#wrapper
{
   border: 1px solid black;
   width: 65%;
}

#imageStyle 
{
    margin-left: 60px;
}

#featuresStyle 
{
    position: relative;
    left: 480px;
    bottom: 870px;
}</pre>

解决方案

30000</h2> <br/> <h2>Description: Good Guitar!</h2> <br/> <h2>Neck Type: Bla Bla Bla</h2> <br/> <h2>Body: Bla Bla Bla</h2> <br/> <h2>Fretboard: Bla Bla Bla</h2> <br/> <h2>Bridge: Bla Bla Bla</h2> <br/> <h2>Neck Pickup: Bla Bla Bla</h2> <br/> <h2>Bridge Pickup: Bla Bla Bla</h2> <br/> <h2>Hardware Color: Bla Bla Bla</h2> <br/> </div> </div> &lt;/body> &lt;/html></pre> and here is the styles.css: <pre lang="CSS">#wrapper { border: 1px solid black; width: 65%; } #imageStyle { margin-left: 60px; } #featuresStyle { position: relative; left: 480px; bottom: 870px; }</pre>

I will show you the direction to finding your answer yourself:
1. If you are using HTML5, which you should, do not place a slash unnecessary, e.g.

<br>

just

<br>

will do.
2. Why are you using h2 tag for feature text? I think p tag should suffice.
3. You asked why a gap between the image and feature text, because it is stated as such:

#featuresStyle 
{
    position: relative;
    left: 480px;

If in doubt, Google to find out the effect of these CSS properties.
4. If you want to place div's side by side, try float or display:inline-block, ask Google for examples.
5. The outermost div #wrapper is set at 65%, does it have enough width to display the image and its feature text side by side?
6. I suggest you learn the box model and position of CSS well.

这篇关于如何根据CSS的相对位置删除空格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！