Question

我试图在我的页面上重新定位几个项目以填满页面上未使用的空间。浮动应该能够做到这一点，但由于某种原因，他们拒绝填补可用空间。这些项目放在同一个直接父母中。

<div class="image-div"></div>
<h1 class="title">title</h1>
<p class="description">Description</p>
<a class="download-link">download-link</a>

并拥有以下css。

.image-div {
     float: left;
     display: inline-block;
     width: 30%;
     margin-right: 5%;
     padding: 0;
}

.title,
.description,
.download-link {
    float: right;
    display: inline-block;
    width: 65%;
    margin: 0;
    padding: 0;
}

我错过了什么吗？建议将不胜感激。此外，如果有另一种方法可以达到相同的效果，我很乐意听到它。我尝试过的位置：绝对;但是当图像太高或描述不够长时，这会弄乱页面。

Answer 1

因为您错过了标题，说明和链接的课程。否则它有效。

＆＃13;

.image-div {
    float: left;
    display: inline-block;
    width: 30%;
    margin-right: 5%;
    padding: 0;
}

.title,
.description,
.download-link {
    float: right;
    display: inline-block;
    width: 65%;
    margin: 0;
    padding: 0;
 }

＆＃13;

<div class="image-div"></div>
<h1 class="title">title</h1>
<p class="description">Description</p>
<a class="download-link">download-link</a>

＆＃13;

Answer 2

浮动可怕可以使用，并且可能导致烦人的布局问题，需要clearfix黑客攻击。请考虑使用Flexbox。其well-supported并且确实...... 灵活。

以下是您如何做到这一点的简单示例。

请参阅Chris Coyier的优秀Complete Guide to Flexbox以了解更多信息。

＆＃13;

.container {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  align-items: stretch;
}

.image-div {
  width: 30%;
  padding: 0;
  border: 1px solid red;
}

.words-div {
  border: 1px solid blue;
  width: 65%;
  margin: 0;
  padding: 0;
}

＆＃13;

<div class="container">
  <div class="image-div">img here</div>
  <div class="words-div">
    <h1 class="title">title</h1>
    <p class="description">Description</p>
    <a class="download-link">download-link</a>
  </div>
</div>

＆＃13;

Answer 3

我从文本div（右侧）删除浮动后，它工作了。我把它们弄到了我想要的地方。这是对我有用的CSS：

<!DOCTYPE html>
<html>
  <head>
  <title>Simple track example</title>
  </head>
  <body>
    <video id="video1" controls autoplay>
      <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9ModernWebStandards/Video.mp4"  >
      <track id='track1' label='English captions' src="entrack.vtt" kind='subtitles' srclang='en' default >   
    </video>

  </body>
</html>

为什么我的花车不会填满页面上的可用空间

3 个答案: