html - 如何删除由于 CSS 相对位置而导致的空白？

Question

我想创建一个网站，该网站将在左侧显示产品图像，在右侧显示规范或功能。我尝试过使用相对位置，它完成了工作。但唯一的问题是，当我将它移动到图像旁边时，它有一个很大的白色空白空间，我不知道如何删除它。请分享您的相关知识，并随时提出新技术来改进我的脚本。

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

这是 main.html 的代码:

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

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

Answer 1

这是使用 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。

希望这有帮助。