0

我越来越近了，但在布置一些 css 时仍然存在一些问题。看到这个小提琴。

  1. 当您单击按钮时，信息消息会根据需要显示在视频下方，但它也会将 div#help-tips-ipad向下移动。它应该留在原地。

  2. 由于某种原因，信息消息的长度比视频播放器长。我希望它是相同的大小。我不明白，因为我明确将其设置为width: 320px？

与小提琴相同的代码：

<p><div id="player-ipad">Video player here</div></p>
<div id="quote"><p></p></div>
<div id="help-tips-ipad">
<p>Read our Guide</p>
<p>Visit our Support Forum and ask a question</p>
<ul>
<li>Text.</li>
<li>More text.</li>
</ul>
</div>


<div id="prettytablediv-ipad">
<p>
<table id="webcam-table" class="pretty">
<thead>
    <tr>
        <th>Camera Name</th>
    </tr>
</thead>
<tbody>
<tr>
<td>
    <input type="submit" class="play" value="button1">
</td>
</tr>
<tr>
<td>
    <input type="submit" class="play" value="button2">
</td>
</tr>
</tbody>
</table>
</p>
</div>

CSS：

#prettytablediv-ipad {
  width: 550px;
  float: left;            
}
#help-tips-ipad {
  width: 320px;
  float: right;

}
#player-ipad {
  width:320px;
  height:240px;
  float: left;
  margin: 0 0 15px;
  border: 5px solid black;
}

jQuery：

$(document).on("click", ".play", function() {
$('#quote p').html("INFO").css({'border': '1px solid', 'margin': '10px 0px', 'padding': '15px 10px 15px 50px', 'background-repeat': 'no-repeat', 'background-position': '10px center', 'color': '#00529B', 'background-color': '#BDE5F8', 'width': '320px','display': 'block','clear': 'left'});
});

提前致谢。

4

4 回答 4

2
  1. 这是一个浮动包装问题 -<div id="quote">元素是 100% 宽度，您需要将其向左浮动，否则后续元素将被强制低于它。真的，你应该在之后添加，<div id="help-tips-ipad">否则浮动不会达到你的预期。
  2. 在应用宽度后添加填充 - 您需要在设置固定宽度时进行补偿，就像您所做的那样。

有关示例，请参见此更新的小提琴。

于 2012-09-19T15:19:09.047 回答
1

原因是因为您使用 320px 作为宽度，然后将填充添加到该值上。

{ 'padding' : '15px 10px 15px 50px' }

浏览器将占用 320 像素，并添加 10 像素 + 50 像素（左右填充），总宽度为380 像素；

您需要从宽度中减去 60px，然后变为260px。

然后你还需要考虑边框，在你的大盒子上是 10px (5+5)，减去你生成的盒子上的 2 x 1px = 添加另一个 8px

新的总宽度 = 268px；

简而言之：你的盒子的总宽度是 Width + left border width + right border width + left padding + right padding。

于 2012-09-19T15:23:26.650 回答
1
  1. 您不能用段落包装 div (

    标签）。浮动的段落也有 100% 的宽度，它应该与他上面的 div 具有相同的宽度（最好用相同的 div 包裹两者）

  2. 填充是在宽度之后添加的，总宽度是两者的总和，所以它比你想要的宽
于 2012-09-19T15:26:04.110 回答
0

更改width为270px

$(document).on("click", ".play", function() {

$('#quote p').html("INFO").css({
    'border': '1px solid', 
    'margin': '10px 0px', 
    'padding': '15px 10px 15px 50px', 
    'background-repeat': 'no-repeat', 
    'background-position': '10px center', 
    'color': '#00529B', 
    'background-color': '#BDE5F8', 
    'width': '270px',
    'display': 'block',
    'clear': 'left'}); 
});

​</p>

于 2012-09-19T15:23:45.080 回答