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

ブラウザは320pxを取り、10px + 50px（左右のパディング）を追加すると、合計幅は380pxになります。

あなたはあなたの幅から60pxを取り除く必要があります、そしてそれは260pxになります。

次に、境界線も考慮する必要があります。これは、大きい方のボックスでは10px（5 + 5）から、生成されたボックスでは2x1pxを引いたものです=さらに8pxを追加します

新しい合計幅= 268px;

つまり、ボックスの合計幅は、幅+左の境界線の幅+右の境界線の幅+左のパディング+右のパディングです。

于 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 に答える