Question

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

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

以下是main.html的代码：

＆＃13;

#wrapper {
  border: 1px solid black;
  width: 65%;
}
#imageStyle {
  margin-left: 60px;
}
#featuresStyle {
  position: relative;
  left: 480px;
  bottom: 870px;
}

＆＃13;

<div id="wrapper">
  <div id="imageStyle">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXMyE-1O_Be_qDQa7YwQGW8DLhNEeNVlOXgKj9BMGdKVsRbSdoYw" />
  </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>

＆＃13;

Answer 1

使用flex是灵活的:)尝试查看此代码

＆＃13;

#wrapper
{
 border: 1px solid black;
  padding: 2px 2px;
  width: 65%;
  display:flex;
}

#imageStyle 
{
  border: 1px solid green;
  flex:2;
  
}

#featuresStyle 
{
  border: 1px solid red;
  flex:4;
}

＆＃13;

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

＆＃13;

Answer 2

这是使用flexbox的好时机。看看。

#wrapper {
  display: flex;
  border: 1px solid black;
  width: 65%;
  min-width: 720px;
  margin: 0 auto;
}
#imageStyle {
  margin: 10px 60px;
}
#featuresStyle {
  margin: 10px 0;
  flex: 1;
}
#featuresStyle h2:first-child {
  margin-top: 0;
}
/* Just to show it working */

#wrapper {
  background: navy;
}
#featuresStyle {
  background: lime;
}
#imageStyle {
  background: tomato;
}

<div id="wrapper">
  <div id="imageStyle">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXMyE-1O_Be_qDQa7YwQGW8DLhNEeNVlOXgKj9BMGdKVsRbSdoYw" />
  </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>

颜色只是为了显示每个元素的位置，flexbox会让它看起来很好看，你会发现我给了#featureStyle flex: 1;这意味着它会增长并填充剩余的空间

我还添加了一个最小宽度，这意味着它不会小于720px。

希望这有帮助。

Answer 3

为两者添加浮动并在left: 800px上更改#featureStyle以获得更好的外观

   #imageStyle
{
margin-left: 60px;
float:left;
}

#featuresStyle
{
position: relative;
float: left;
left: 800px;;
bottom: 870px;
}

如何根据CSS的相对位置删除空格？

3 个答案: