Question

我试图让Lorem Ipsum的段落在它和spotify iframe插入之间有大约30px的边距。我尝试了很多东西，并且搜索但似乎无法像我想的那样让它工作。这是我的codepen的链接。 http://codepen.io/ChrisPetrick/pen/gpzRzY

＆＃13;

.nickDrakeHorn {
  border: 1px solid black;
  overflow: hidden;
  height: auto;
  width: 100%;
  background-color: #FF99CC;
}
#iframe {
  margin-right: 30px;
  margin-top: 30px;
  margin-left: 20px;
}

#trackInfo1 {
  float: left;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 1px;
  margin-bottom: 1px;
  font-size: 20px;
  width: 65%;
}
#commentary1 {
  font-size: 20px;
  width: 95%;
  padding-left: 30px;
}

＆＃13;

 <div class="box nickDrakeHorn">
   <div id="iframe">
     <iframe src="https://embed.spotify.com/?uri=spotify%3Atrack%3A4XFZey4zmgQV551M0hfaUg" width="300" height="380" align="left" border-right="30px"></iframe>
   </div>
       <div id="trackInfo1">
            <hr />
            <p><strong>Track: <q>Horn</q></strong></p>
            <p><strong>Artist: Nick Drake </strong></p>
            <p><strong>Original Album: Pink Moon </strong></p>
            <p><strong>Year: 1972 </strong></p>
            <hr />
       </div>

       <div id="commentary1">
            Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.
            Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, Blah Blah Blah dolor sit amet nulla ham qui sint exercitation
            eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod
            commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.  Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod
            commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod
            commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo,
            chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.
            Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.
            Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit,
            dolore aliqua non est magna in labore pig pork biltong.  Blah Blah Blah dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit,
            dolore aliqua non est magna in labore pig pork biltong.
       </div>
 </div>

＆＃13;

Answer 1

我已经使用我的解决方案分叉你的CodePen，以防你想要摆弄它。

http://codepen.io/dharshba/pen/YXLQBb

.nickDrakeHorn {
  border: 1px solid black;
  overflow: hidden;
  height: auto;
  width: 100%;
  background-color: #FF99CC;
  padding:20px;  
}

iframe {
  float:left;
  margin-right:30px;
  margin-bottom:20px;
}

#trackInfo1 {
  margin-top: 1px;
  margin-bottom: 1px;
  font-size: 20px;
  width:100%;
}

#commentary1 {
  font-size: 20px;
}

一些问题来自像素和百分比的尴尬组合。由于您的iframe宽度以像素为单位，因此无法确定#trackInfo1上65％宽度的最终位置。但是，从该div中移除float:left后，它现在占用了Spotify iframe之后剩下的的100％，而不是在iframe占用超过35％的情况下下降空间，以获得更可预测的结果。

iframe的底部边距为20px，这是因为段落中的行最终结果看起来正确。如果更改字体大小或行高，则可能需要进行调整。

我还认为你有一些额外的混乱，试图通过自己的边距和填充来保持单个元素远离边界。在外部div (.nickDrakeHorn)上放置填充是一种更简单的方法，可以防止内部的所有内容过于靠近边缘。

最后，包装iframe的div似乎没有做太多，所以我把它从HTML中取出并直接将样式应用到iframe标签。

Answer 2

改变这个：

List.hashCode()

对此：

#iframe {
  margin-right: 30px;
  margin-top: 30px;
  margin-left: 20px;
}

iframe是一个元素，所以如果你的iframe有这样的ID，你可以通过iframe { margin-right: 30px; margin-top: 30px; margin-left: 20px; }来调用它：

iframe

然后<iframe src="https://embed.spotify.com/" id="iframe"></iframe> css调用就可以了。

文字太靠近iframe - 如何获得边缘/边界？

2 个答案: